我有一些不同高度的内容框，它们是 float 的。不幸的是，中间有很多浪费的空间。以下面的例子为例(https://jsfiddle.net/mzqb7mzm/ 如果你想现场观看和播放):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
body {
width: 320px;
}
div {
margin: 2px;
width: 100px;
border: 1px solid #aaa;
}
.box {
float: left;
}
</style>
</head>
<body>
<div class="box" style="height: 50px; ">1. box</div>
<div class="box" style="height: 300px; ">2. box</div>
<div class="box" style="height: 150px; ">3. box</div>
<div class="box" style="height: 200px; ">4. box</div>
<div class="box" style="height: 150px; ">5. box</div>
<div class="box" style="height: 100px; ">6. box</div>
</body>
</html>
我怎样才能确保，例如框 4 或 5(或任何其他)填充框 1 下面的空间而不是产生这个大空白？已经看到一些解决方案，如 Thumblr，但它们使用的是 Javascript。我对纯 CSS(最好是 CSS2)解决方案感兴趣。这可能吗？
最佳答案
我很抱歉这么说，但在技术上不可能在 CSS 中做到这一点。我也遇到过这个问题，但找不到解决方案(更改显示不起作用，额外的 div 不起作用，等等)。
如果有人仍然知道解决方案，我会很高兴听到。
关于html - 通过 CSS 将内容框分布/ float 到等高列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36970882/