讓我的CSS框看起來正確的百分比寬度和邊距。

Question

所以，我試圖讓一些內容很好地適合另一個容器。

我的CSS：（也稱「測試」收件箱的ID =「resultBox」）

#resultBox{ 
    display: block; 
    position:absolute; 
    width:20%; 
    margin:0px; 
    padding:0px; 
} 

但是這看起來不錯，這一切都侷促，但是，我希望這是每行5盒，有沒有一種方法可以給出一個邊距，並使其自動調整寬度％？

圖片相關：頂部是我想要的邊距，但底部是我想要的行爲。

Answer 1

那這臺無表的實現？

http://jsfiddle.net/Wexcode/xKj8n/

<div id="table"> 
    <div class="row"> 
     <div><span>Test</span></div> 
     <div><span>Test</span></div> 
     <div><span>Test</span></div> 
     <div><span>Test</span></div> 
     <div><span>Test</span></div> 
    </div> 
</table> 

編輯：

你也可以做到這一點沒有行，如果你願意sacrifice compatibility with IE8和使用nth-child()選擇（你總是可以申請使用JavaScript類）：

http://jsfiddle.net/Wexcode/xKj8n/2/

<div id="table"> 
    <div><span>Test</span></div> 
    <div><span>Test</span></div> 
    <div><span>Test</span></div> 
    <div><span>Test</span></div> 
    <div><span>Test</span></div> 
</div>​ 

Answer 2

像你想通過使用outline你可以模擬保證金：

#resultBox { 
    ... 
    outline: 1px solid white; 
    ... 
} 

這種方式，您將有每個塊的視覺清晰度，不會撞上最右邊的一個下到下一行。

Answer 3

如果你只支持新的瀏覽器，然後使用box-sizing: border-box

這將包括寬度內的邊距和邊框。不要使用邊距，使用邊框來提供間距的外觀。

參見：https://developer.mozilla.org/en/CSS/box-sizing

Answer 4

不知道瀏覽器的要求是什麼，但你可以嘗試新的CSS3 Flexbox的模塊：

http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

Answer 5

您可以嘗試在正確的使用box-sizing: border-box與1px的邊框和底部，但您還需要使用:nth-child從最右邊的框中刪除多餘的1px。

.box 
{ 
    width: 20%; 
    float: left; 
    border-radius: 3px; 
    padding: 5px; 
    border-right: solid 1px #fff; 
    border-bottom: solid 1px #fff; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    background-color: #ccc; 
} 

.box:nth-child(5n) 
{ 
    border-right: 0; 
} 

http://jsfiddle.net/Pf2LZ/

這應該在合理的瀏覽器和IE8 +工作。只有IE8（我認爲）由於缺少對:nth-child的支持而在右側會有一個額外的像素。如果這是一個問題，你總是可以每隔五分鐘增加一個班級。

Answer 6

如果您嘗試顯示錶格數據，您應該真的在使用表格。

td { 
    width: 20%; 
    text-transform:uppercase; } 

HTML：

<table> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
    <tr> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
     <td>Test</td> 
    </tr> 
</table>