CSS Float Left，边缘分离

Question

在处理数据驱动的内容时，我们不知道将生成的元素数量:

每个元素都应该 float:left 并排放置，直到它们排成一行，然后再排成另一个。

我希望每个元素之间有一些分隔。如果我应用 MARGIN 或 PADDING 它也会影响最后的元素。我想要的是在一行中的每个元素之间分隔一定数量的像素。

例如:

.container {
   width:1000px;
}
.bubble {
   width:240px; height:200px; margin-right:10px;
}
<div class="container">
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
</div>

Answer 1

这是我遇到类似问题时通常使用的技巧。

.container {
    margin: -10px 0 0 -10px;
}
.bubble {
    margin: 10px 0 0 10px;
}

这将抵消容器和箱子将随之而来。如果您不对实际包装元素的 div 应用更多样式(在本例中为 .bubble)，用户将看不到它，您将拥有带有边距和所有内容的完美网格!