使div适应可用空间？

Question

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

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

我希望它们能够填满页面，具体如下：

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

...但我似乎无法让它们填充成这样：

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

我希望不把它们分组成列。是否有CSS规则可以使它们动态填充上方的空间？

编辑：感谢快速回复。

我特别要求使用CSS hack，以避免使用jQuery。这是一个相当琐碎的jQuery问题(我的jQuery比我的CSS好！)，只是想知道是否可以仅使用CSS来解决问题。

- opticon

---

可能是您在右侧框中设置了底部边距。 - cbr

这是mdesdev将它们包装在列中的想法的实际演示：http://jsfiddle.net/777SW/1/ - gaynorvader

@gaynorvader 当我说包装它们时，我的意思是这个FIDDLE ;) - Milan and Friends

@mdesdev 我错了！虽然使用固定宽度，但列是最有意义的。 - gaynorvader

如果你只有2列，你可以将左侧的内容向左浮动，右侧的内容向右浮动。 - vals

Answer 1

您可以始终使用CSS3列，就像这样：

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

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

看一下这个示例

显然，唯一的缺点是浏览器支持，因为很多浏览器还不支持这些东西，所以你应该回退到JavaScript解决方案，例如Masonry应该可以很好地工作。

- Bounasser Abdelwahab

---

提供真正的HTML5解决方案，加1分。 - Stefan

Answer 2

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

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

- anar khalilov

---

浮动左侧不会使它们垂直堆叠。 - Patsy Issa

如果他只是浮动它们，就会发生这种情况：http://jsfiddle.net/shLKW/ - bouscher

将会检查并尽快回复，等待 jsfiddle.net 加载完成。 - anar khalilov

Answer 3

使用float:left是最佳选择。

---

| | | | | | ----

---

---- | |

| | ----

另一个例子，如果你想将这个模式应用到除其他 div 标签之外的另一个 div 标签上，那么你可以使用 clear:left CSS 属性，它用于清除特定 div 的浮动值，因此你可以将此模式用于最后一个 div 标签。

- Sri

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>

- Pawan Lakhara