CSS：如何排列所有浮动：左边元素完美，没有间隙？

Question

好的，我无法解决这个问题......我已经将这些元素留下来了：

.event {
    display: block;
    float: left;
    width: 25%;
}

当浏览器调整大小以调整屏幕大小时，动态生成宽度，因此我无法控制每行显示多少这些元素，并且我无法添加清除：两个中断div /行任何地方因为它（它都是动态生成的）。

Here is a screenshot of the problem

或调整大小时，另一个版本：

Another screenshot

现在，我已经尝试了overflow:hidden方法，clear:both（我无法使用），event::after方法，我可以＆＃39;}弄清楚如何将这些设置为正确排列而没有间隙。如果我在它们上面设置的高度很好，但是高度也会动态变化，因此我无法插入设定的高度。

还有其他想法吗？

Answer 1

根据您当前的视口大小（或父级大小），您需要将clear:left应用于每个3n + 1或4n + 1 .event元素（您可以应用一个规则或另一个使用媒体查询）

.event:nth-child(3n + 1) {
   clear:left;
}

或

.event:nth-child(4n + 1) {
   clear:left;
}

请注意。指定float后，display属性完全无用（除非您使用的是IE6并且您正在与＃34; double margin bug＆＃34作斗争;）

Answer 2

尝试设置固定高度然后可能是溢出：滚动;或隐藏：

.event {
    display: block;
    float: left;
    width: 25%;
    height: 200px;
    max-height: 200px;
    overflow: auto;
}

这是一个原始的小提琴演示：

http://jsfiddle.net/ry9qgz3o/

你应该设置容器，使其宽度为25％，并且可以使用白色填充，这样你的.event元素就不会太靠近在一起。

Answer 3

在CSS中，从所有方面填充 0px 删除差距

.event {
display: block;
float: left;
padding:0;
// if you want 5px padding left-right then give property 
// padding:0 5px;

width: 25%;
}