CSS向左浮动，边缘分隔

Question

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

每个元素都应该浮动：左并排并排，直到它们排成一排，然后再排成另一排。

我想在每个元素之间进行一些分离。如果我应用 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），用户将看不到它，您将拥有完美的带有边距的网格！