Question

我有许多不同高度但固定宽度的div，因此：

---- ----
|  | |  |
|  | ----
----

我希望他们按如下方式填写页面：

---- ----
|  | |  |
|  | ----
---- ----
---- |  |
|  | ----
----

...但我似乎无法让他们像这样填写：

---- ----
|  | |  |
|  | ----
----         
---- ----
|  | |  |
---- ----

我不想将它们分组到列中。是否有CSS规则允许它们动态填充上面的空间？

编辑：感谢您的快速回复。

我特意要求一个CSS hack来避免jQuery。这是一个相当简单的jQuery问题（我的jQuery比我的CSS更好！），只是想知道我是否可以单独使用CSS。

Answer 1

您可以随时使用CSS3列，如下所示：

<!-- html -->
.container>.item*5{lorem}

<!-- css -->
.container { column-count: 3; column-gap: 1em; }
.container .item { column-break-inside: avoid; }

看看这个Example

显然，唯一的缺点是浏览器支持，因为很多浏览器还不支持这些东西，所以你应该回到javascript解决方案，像Masonry这样的东西应该可以正常工作。 / p>

Answer 2

尝试将float: left;添加到所有这些div中。

如果您共享代码，我可以提供更多帮助。

Answer 3

浮动：左边是最好的选择。

| | | | | | ----

---- | |

| | ----

另一个例子，如果你希望这个模式与其他div标签不同，那么你可以使用 clear：left css属性来清除你提到的特殊元素的浮点值，因此您可以将此模式用于最后一个div标记。

Answer 4

检查此链接http://jsfiddle.net/shLKW/3/我希望这会对您有所帮助。

A<div style="width:100px; height: 80px;">
    <div style="height:80px;width:50px;background:#000;float:left; color:white">1</div>
    <div style="height:50px;width:50px;background:#ff0000;float:left">2</div>
</div>   

<div style="width:100px">

    <div style="height:50px;width:50px;background:#aeaeae;float:left">3</div>
    <div style="height:50px;width:50px;background:#666;float:left">4</div>

</div>

让div适合可用空间？

4 个答案:

| | ----