Question

我认为这不能在CSS中完成，但是这里的人比我更了解。 ; - ）

我在容器内有几个盒子。我希望每行三个盒子，并在左右两侧与容器接触。我希望它们之间有相同的水平空间。

能做到吗？这里有一个小提琴：http://jsfiddle.net/lborgman/XtCQJ/1/

最后一（第二行）怎么样？那里的间距可以做些什么？

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>    

#container {
    background: green;
    width: 80%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
#container div {
    background: blue;
    display: inline-block;
    width: 27%;
    height: 30%;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

可以通过宽度和边距的合理使用来完成。以Check this updated fiddle为例。相关代码如下：

#container div {
    width: 32%; 
    margin-right: 2%;
    margin-bottom: 2%;
}
#container div:nth-child(3n) {
    margin-right: 0;
}

每条“线”的总宽度加起来为100％：三个32％宽度，两个2％边距。每一行的第三项都使用第n个选择器删除了右边距。

您不必使用百分比，但概念将始终保持不变 - 将您的宽度和边距分开，以便完美地适合其父级（或略微更少），并警惕来自边界的额外像素。

注意：我建议不要使用百分比高度，因为它们可能会导致问题。

我可以在每行中放置三个盒子，等间距并且左右粘合到容器上吗？

1 个答案: