Question

过去几天我一直试图解决如何解决某个网页设计的问题，但到目前为止，我还没有能够提出任何优雅的解决方案。

简要总结设计时，有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”（同时也解决了前一点）？

最好我想通过任何类型的脚本操作来解决这个问题，但是如果我必须那么mooTools是我的“首选毒药。

Answer 1

根据您的要求。您可以使用http://masonry.desandro.com/。

响应布局不均匀高度

1 个答案: