Html 使用CSS显示多行中的元素

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

<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>

---

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

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

如果我理解正确，您不需要对单独的小部件进行任何特殊处理。只需给小部件留出一半间距的四周边距，给容器留出相同的边距，但为负数

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

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

---

请参见

我遇到的问题是实现图中所示的布局-很难实现浮动元素周围的相等白边距，但容器的侧面没有。我想你是对的，我是！只要稍加修改（小部件只使用左边距和底部边距，并在容器上设置一个负的左边距），我就可以防止容器变宽并触发滚动条（这是我页面区域的宽度）。谢谢