0

我正在尝试在 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; }

但结果不是方形对齐：

在此处输入图像描述

我怎样才能做到这一点？

4

4 回答 4

3

取出float: left并使用position: absolute，而不是position: relative打开box_0_0和其余部分。那样有用吗？

于 2012-05-27T20:35:04.653 回答
1

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

于 2012-05-27T20:49:48.500 回答
0

您能告诉我们您希望它们看起来如何吗？像棋盘一样，所有方格都对齐到每一边？

给相对 div 内的元素一个相对位置是没有意义的——如果需要，给内部 div 一个绝对位置。

尽管如果您试图让这些框彼此相邻 - 使用无序列表来包含每个框 - 如果您知道每行中放置的框数，则可能是每行的无序列表。

否则，删除相对位置的浮动也可以工作。

如果您遇到问题，请告诉我 - 我一定会看到您得到解决方案 - 干杯！

于 2012-05-27T20:38:14.943 回答
0

我会使用这样的布局：

<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; }
于 2012-05-27T20:39:59.637 回答