Question

我正在开发一些项目来改进我的HTML和CSS。其中一个是简单的数独求解器。我需要创建一个Grid，在其中放置标签或TextBoxes。我希望网格布局与此question中的网格图像完全相同。

实现这一目标的最佳方法是什么？ CSS ......还是表？我将如何创建这个？

Answer 1

如果是表格数据，您可以使用表格。如果你想坚持使用DIV，你可以通过为每个父立方体和子幼崽设置特定的宽度/高度值，并简单地左/右浮动来轻松完成。如果您决定不使用明确的宽度/高度值，请务必使用clear fix来阻止内容流过其兄弟代码。

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>

Answer 2

哇Jonathan Sampson很快，值得称赞！这是我的方法：

 <?xml version='1.0' encoding='UTF-8'?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
        <head>      
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
            <title>Sudoku</title>

        <style type="text/css">
          #playfield{
            width:920px;
            height:920px;
          }
          #playfield div{
            width:300px;
            height:300px;
            float:left;
            border:1px solid #ff8a00;
          }
          #playfield span{
            font-size:300%;
            width:98px;
            height:98px;
            float:left; 
            display:block;
            border:1px solid white;
            text-align:center;  
            line-height:99px;
            background-color:#f2f2f2;      
          }
          #playfield span:hover{
            background-color:#0d2f5a;
            color:white; 
          }
        </style>          
        </head>

        <body>
          <div id="playfield">
            <div>
            <span id="position_1">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            </div>
            <div>
              <span>...</span>
            </div>
          </div>
        </body>
    </html>

CSS - 创建9x9 Sudoku网格的最佳方法是什么？

2 个答案: