让我的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>