html - 使用百分比宽度和边距让我的 CSS 框看起来正确。

Question

所以，我试图让一些内容很好地适应另一个容器。

我的 CSS：（显示“测试”的框是 id='resultBox'）

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

但这看起来很糟糕，都很狭窄，但是，我希望每行有 5 个框，有没有办法可以给一个边距，让它自动调整宽度%？

图片相关：上边是我想要的边距，下边是我想要的行为。

Answer 1

如果您只支持较新的浏览器，请使用box-sizing: border-box

这将包括宽度内的填充和边框。不要使用边距，使用边框使事物具有间距的外观。

参见：https ://developer.mozilla.org/en/CSS/box-sizing

Answer 2

您可以使用以下方法模拟您想要的边距outline：

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

这样，您将拥有每个块的视觉定义，而不会将最右边的块撞到下一行。

Answer 3

这个无表的表实现怎么样？

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>

编辑：

如果您愿意牺牲与 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 4

您可以尝试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 5

如果您尝试显示表格数据，您真的应该使用表格。

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>

Answer 6

不确定您的浏览器要求是什么，但您可以尝试新的 CSS3 Flexbox 模块：

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