在过去的几天里，我一直在努力思考如何解决某个网页设计问题，但到目前为止，我还没有想出任何优雅的解决方案。
为了简要总结设计，有 3 列容器，其中容器的高度不均匀（动态生成）但宽度相同（流体）。它们需要按从左到右的数字顺序排列；即顶行的1-2-3，其次是第二行的4-5-6，依此类推。
现在，真正让我崩溃的是试图让这条线整齐排列，而在容器之间没有太多不必要的“垂直间距”。我创建了以下模型代码（也可用作代码块下方的 JSFiddle）来说明：
HTML
<div class="wrapper" id="wrapper">
<div class="container small" id="container_1">1</div>
<div class="container large" id="container_2">2</div>
<div class="container small" id="container_3">3</div>
<div class="container medium" id="container_4">4</div>
<div class="container small" id="container_5">5</div>
<div class="container medium" id="container_6">6</div>
<div class="container large" id="container_7">7</div>
<div class="container medium" id="container_8">8</div>
<div class="container large" id="container_9">9</div>
<div class="clearfix"></div>
</div>
CSS
.wrapper {
width: 100%;
padding: 5%;
}
.clearfix {
clear: both;
}
.container {
display: block;
float: left;
width: 25%;
margin: 2.5%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.small {
height: 100px;
background: red;
}
.medium {
height: 150px;
background: green;
}
.large {
height: 200px;
background: blue;
}
JSFiddle：http: //jsfiddle.net/tzikas/MYgNx/
注意：由于列布局本身最终会根据设备宽度分解为两列/一列，因此我在 JSFiddle 中包含了一个简单的“切换布局”按钮来模拟这一点。
我想帮助弄清楚的内容如下：
- 如何摆脱例如“1”和“5”或“2”和“6”之间的过度垂直间距？
- 如何让“4”将自己定位在“1”下方而不是“3”下方（同时也解决了前一点）？
最好我想在不通过任何类型的脚本操作 DOM 的情况下解决这个问题，但如果我必须这样做，那么 mooTools 是我的“首选毒药”。