我最近一直在思考如何解决一个网页设计问题,但是到目前为止,我还没有想出任何优雅的解决方案。
简要概括设计,有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是我“首选的解决方案”。