div 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

請您告訴我們您希望他們看起來如何？像一個棋盤，所有的方塊都對準每一邊？

在相對div內沒有給出相對位置的元素 - 如果需要，給內部div的絕對位置。

儘管如果您試圖獲得相鄰的方框 - 使用無序列表來包含每個方框 - 如果知道放置在每一行中的方框的數量，可能是每行的無序列表。

除去相對位置已移除的浮點數也可以。

如果您遇到問題，請告訴我 - 我一定會看到您獲得解決方案 - 乾杯！

Answer 3

我會用這樣的佈局：

<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; } 

Answer 4

我相信這是你想要什麼：http://jsfiddle.net/KdRre/1/