html 响应式高度,html5 – 响应式布局不均匀高度

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

为了简要总结设计,有3列容器,其中容器具有不均匀(动态生成)的高度但具有相同(流体)宽度.它们需要布置成它们按照从左到右的数字顺序排列;即顶行1-2-3,第二行4-5-6,依此类推.

现在,真正破坏我的坚果的是试图使这个排列整齐,而容器之间没有很多不必要的“垂直间距”.我已经创建了以下模拟代码(也可以作为代码块下面的JSFiddle)来说明：

1

2

3

4

5

6

7

8

9

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中包含了一个简单的“切换布局”按钮来模拟它.

我想帮助解决的问题如下：

>我如何摆脱每个之间过多的垂直间距

例如,“1”和“5”或“2”和“6”？

>我如何获得“4”的位置

本身低于“1”而不是低于“3”(同时也解决了

前一点)？

我想要通过任何类型的脚本来操作DOM来解决这个问题,但是如果我必须那么mooTools是我的首选毒药.