小编agt*_*gtb的帖子

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

< - 灰色块是小部件,红色边框是容器

简化,我在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 margin-left: 0将无法正确显示新行.

在小部件上:last-child设置margin-right: 0第一行的margin-right 强制容器div更宽,并且在MSIE9之前不支持last-child.

相等的左右边距(例如边距:0 5px 10px)再次迫使容器变宽.

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

有没有办法在CSS中这样做？

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