我正在开展一些项目来改进我的 HTML 和 CSS。其中之一是简单的数独求解器。我需要创建一个网格来放置标签或文本框。我想要一个与此中的网格图像完全相同的网格布局question https://stackoverflow.com/questions/305860/how-would-you-construct-and-interact-with-a-grid-like-a-sudoku-board.
实现这一目标的最佳方法是什么？ CSS...还是表格？我将如何创建这个？
如果是表格数据，可以使用表格。如果您想坚持使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
