使用CSS显示多行中的元素

Question

我有一个固定宽度的容器<div>，它显示一个或多个小部件<div>。我希望它看起来像这样：

＆lt; - 灰色块是小部件，红色边框是容器

简化，我在HTML中的结构如下所示：

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
</div>

考虑

1. 小部件将具有固定高度，例如100px的
2. 小部件将具有固定宽度，例如100px但它们也可能是该宽度的倍数（加上任何边距交叉 - 参见小工具1）
3. 小部件应与边距（或类似）间隔良好，例如： 10px的
4. 我不知道会有多少个小部件（用户可以根据需要分配多少个小部件）。
5. 容器是固定宽度但没有任何“视觉”样式（红色边框用于演示）
6. 解决方案必须适用于现代浏览器（和MSIE7），理想情况下是纯CSS。

由于考虑 4。我无法分配额外的标记，例如行div，类（.first-child，.last-child）和 2。 :nth-child将不起作用AFAIK。

我尝试过的事情

使用:first-child设置margin-left: 0的小部件上的

margin-left将无法正确显示新行。

在:last-child设置margin-right: 0的小部件上

margin-right第一行强制容器div加宽last-child isn't supported until MSIE9。

相等的左右边距（例如边距：0 5px 10px）会再次迫使容器变宽。

溢出 - 在我脑海里工作得很好！与边距或填充无关。

有没有办法在CSS中执行此操作？

http://jsfiddle.net/agtb/VHXGT/

Answer 1

我相信你的想法太复杂了： - ）

如果我理解正确，您不需要对单独的小部件进行任何特殊处理。只需给小部件提供一半间距的边缘，并且容器具有相同的余量但是为负。

#container {
    width: 440px;
    margin: -5px;
}

#container div {
    background-color: gray;
    height: 100px;
    width: 100px;
    float: left;
    margin: 5px;
}

请参阅http://jsfiddle.net/SGdG3/1/

Answer 2

设置容器宽度400，第一个div宽度200向左浮动，休息宽度100向左浮动