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

Question

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

实现这一目标的最佳方法是什么？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>