div方格对齐问题中的css div

Question

我正在尝试在html页面中创建一个6 * 6输入框的正方形。为了定位它们，我使用div和css：

<div class="boxes">
    <div class="box_0_0"><input... ></div>
    <div class="box_0_1"><input... ></div>
    <div class="box_0_2"><input... ></div>
    <div class="box_0_3"><input... ></div>
    ...
    <div class="box_1_0"><input... ></div>
    <div class="box_1_1"><input... ></div>
    ...
</div>

，其中

.boxes { position: relative; }

.box_0_0 { position: relative; float: left; top: 0px; left: 0px; width: 40px; height: 50px; }
.box_0_1 { position: relative; float: left; top: 0px; left: 50px; width: 40px; height: 50px; }
...

.box_1_0 { position: relative; float: left; top: 60px; left: 0px; width: 40px; height: 50px; }
.box_1_1 { position: relative; float: left; top: 60px; left: 50px; width: 40px; height: 50px; }

但结果不是方形对齐：

我怎样才能做到这一点？

Answer 1

取出float: left并在position: absolute上使用position: relative代替box_0_0，其余部分。这有用吗？

Answer 2

我相信这就是你想要的：http://jsfiddle.net/KdRre/1/

Answer 3

您能否告诉我们您希望他们看起来如何？像一个棋盘，所有正方形都与每一侧对齐？

没有点给出相对div内部元素的相对位置 - 如果需要，给内部div一个绝对位置。

虽然如果你试图让盒子彼此相邻 - 使用无序列表来包含每个盒子 - 如果你知道放在每一行的盒子数量，可能是每行的无序列表。

否则，移除相对位置的浮动也会起作用。

让我知道你遇到问题 - 我肯定会看到你得到一个解决方案 - 干杯！

Answer 4

我会使用这样的布局：

<div class="boxes">
    <div class="left_0 top_0 box"><input... ></div>
    <div class="left_1 top_0 box"><input... ></div>
    <div class="left_2 top_0 box"><input... ></div>
    <div class="left_3 top_0 box"><input... ></div>
    <div class="left_0 top_1 box"><input... ></div>
    <div class="left_1 top_1 box"><input... ></div>
    ...
</div>

和CSS：

.boxes { position: relative; }
.box   { position:absolute;width:40px;height:50px; }
.left_0 { margin-left:0px;}
.left_1 { margin-left:50px; }
...
.top_0 { margin-top:0px; }
.top_1 { margin-top:60px; }