在处理数据驱动的内容时,我们不知道将生成的元素数量:
每个元素都应该 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>
最佳答案
这是我遇到类似问题时通常使用的技巧。
.container {
margin: -10px 0 0 -10px;
}
.bubble {
margin: 10px 0 0 10px;
}
这将抵消容器和箱子将随之而来。如果您不对实际包装元素的 div 应用更多样式(在本例中为 .bubble),用户将看不到它,您将拥有带有边距和所有内容的完美网格!
关于CSS Float Left,边缘分离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8342325/