<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我有一堆 .section div，它们有一个图像和一个标题。它们都是 float:lefted。只要 .section div 大小相同，一切都很好。如果一个比其他的大，基本上是在“支撑”它下面的“行”。
这是我的意思的一个例子:http://jsfiddle.net/qj4dzgyo/4/
如您所见，第二行的部分并没有完全向左浮动，因为顶行的一个部分的标题较长，使 div 更大。无论如何我可以解决这个问题吗？谢谢!
最佳答案
If one is bigger than the rest, is basically "holds up" the "row" underneath it.
这就是 float 的工作原理。
如果你不想这样，那么使用 display:inline-block 而不是 float，参见 http://jsfiddle.net/qj4dzgyo/5/
(请注意，在此示例中，我将元素的宽度从 20% 更改为 19%，因此仍然有五个元素可以放在一行上。您可能还想阅读 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 了解这方面的内容。)
或者，如果你总是有五个 float 元素彼此相邻(似乎是给定的，宽度为 20%)，你也可以在每 5n+1 个元素上清除 float :
.section:nth-child(5n+1) {
clear:left;
}
关于html - float :left being thrown off by varying size divs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32658485/