Question

目标：我想让我的div像这样漂浮在彼此旁边。

.post {
   float:left;
   padding:10px;
   margin:5px;
   border:1px solid #000;
   width:25%;
}

问题：当我在div之间有一个更长的内容时，那么就是将它下方的div推到一边。

http://jsfiddle.net/W3afJ/

.post {
   float:left;
   padding:10px;
   margin:5px;
   border:1px solid #000;
   width:25%;
}

如何实现像jsfiddle.net/x8Abc/1/这样统一的良好包装布局？

Answer 1

在这种情况下，您需要使用display: inline-block。

像你这样修改你的CSS：

.post {
   display: -moz-inline-stack;
   display: inline-block;
   *display: inline;
   padding: 10px;
   margin: 5px;
   border: 1px solid #000;
   width: 25%;
   zoom: 1;
}

Here's a fiddle as well

要垂直对齐块，请更改vertical-align css属性，例如

.post {
   display: -moz-inline-stack;
   display: inline-block;
   *display: inline;
   padding: 10px;
   margin: 5px;
   border: 1px solid #000;
   width: 25%;
   zoom: 1;
   vertical-align: top;
}

有关让display: inline-block在IE中工作的更多信息（如上所述），请参阅此处：

https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

您有几种不同的选择：

为每个帖子指定一个固定的高度，并将overflow属性设置为auto。这将（显然）确保每个都是相同的高度，因此避免一个浮动在其兄弟旁边的问题，但会将滚动条添加到带有大量文本的div，并将空白区域添加到那些一点点（见here）：
```
.post {
    float: left;
    padding:10px;
    margin:5px;
    border:1px solid #000;
    width:25%;
    height: 250px;
    overflow: auto;
 }
```
坚持使用float来布置您的帖子，并确保清除每行中的第一篇帖子（see it in action）。这可以像这样实现*：
```
.post:nth-child(3n + 1) { clear:both; }
```

更改您的帖子以布置帖子以使用inline-block，如下所示：

.post {
    display: inline-block;
    padding:10px;
    margin:5px;
    border:1px solid #000;
    width:25%;
 }

您的原始示例here有一个分支。我建议采用这种方法，因为它使您能够根据需要垂直对齐帖子，并且不会限制每个类似选项1中的副本数量。This article是一个很好的阅读，并详细说明如何在旧版浏览器中使其工作。

*请注意，IE＆lt; 9将不支持nth-child伪类，因此您需要为这些浏览器提供JavaScript备用。

如何使div彼此相邻？

2 个答案: