1

目标：我想让我的 div 像这样彼此相邻浮动。

http://jsfiddle.net/x8Abc/1/

.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/ 这样的统一布局？

4

2 回答 2

3

你需要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;
}

这也是一个小提琴

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

.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/

于 2013-04-02T13:59:10.953 回答
2

你有几个不同的选择：

  1. 给每个帖子一个固定的高度，并将溢出属性设置为auto. 这将（显然）确保每个高度相同，从而避免一个浮动在其兄弟旁边的问题，但会在divs 中添加带有大量文本的滚动条，并在文本很少的底部添加空白空间（见这里）：

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

  2. 坚持float布置您的帖子，并确保清除每行中的第一个帖子（查看实际操作）。可以这样实现*：

    .post:nth-child(3n + 1) { clear:both; }

  3. 改变你的布局你的帖子使用的方法inline-block，像这样：

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

您的原始示例在这里有一个分支。我建议使用这种方法，因为它使您能够根据需要垂直对齐您的帖子，并且不会限制每个类似选项 1 中的副本数量。这篇文章很好读，并详细说明了如何即使在较旧的浏览器中也能正常工作。

* 请注意，IE<9 不支持nth-child伪类，因此您需要这些浏览器的 JavaScript 后备。

于 2013-04-02T14:08:10.143 回答