如何浮动不同高度的元素？答案

【问题标题】：How to float elements with different heights?如何浮动不同高度的元素？
【发布时间】：2012-08-04 20:39:18
【问题描述】：

我正在开发一个响应式网页设计，它可以并排浮动 4 列中的多个项目。这些项目具有不同的高度，因此浮动无法正常工作。

这就是现在发生的事情：

关于如何使元素像这样浮动的任何想法：

我想这应该适用于 jQuery“砌体”，对吧？但是我正在使用 Zepto.js，我猜想 jQuery 插件不起作用。

是否有任何纯 CSS (CSS3) 方法？有什么技巧吗？

如果这不适用于纯 CSS 或 JS，是否可以这样做：

现在包含元素 5、6 和 7 的第二行并没有“真正”像您期望的那样浮动，但里面有一个隐藏的换行符（clearfix）。

纯CSS有什么办法吗？例如。使用nth-child(4n+4) 和:after 之类的伪选择器来应用content 的换行符？

对此有什么想法吗？有什么聪明的技巧可以让它发挥作用吗？

【问题讨论】：

第二个不用clearfixing，把1,2,3,4放在一个容器里，5,6,7,8放在一个容器里
一些 jquery 插件可以与 Zepto 一起使用。我不能代表 Masonry，但你可以在解雇它之前尝试一下。
目前已经出现了一些 JS 替代砌体的方法：github.com/attila/savvior 和 github.com/rnmp/salvattore

标签： javascript jquery css css-float

【解决方案1】：

你可以对每五个元素应用一个 clear 来强制它从左边开始。我认为它在 css3 中看起来像这样：

div#wrapper > *:nth-child(4n+1) {
   clear: both;
}

jsFiddle demo

【讨论】：

美丽的答案。我知道clear: both 的用法，但不知道您可以指定一个重复索引公式来选择CSS3 中的nth-child。我希望你不介意@PeterVR，但我添加了一个小型演示 jsFiddle。
这真是绝妙的解决方案
如果您真的在进行响应式设计，那么一行中的元素数量可能并不总是 4。在这种情况下，@my-head-hurts 的答案会更适合。跨度>
@ArnoudSietsema inline-block 现在确实很好。但是，您也可以轻松更改媒体查询中的 (4n+1) 部分......
与 Bootstrap 配合得很好！

【解决方案2】：

正如@Arieljuod 所述，您可以使用display: inline-block 而不是float。它的美妙之处在于它可以在所有浏览器中运行（包括 IE7+ 以及下面的 hack）并且完全流畅：

div {
    ...
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0.3em;
    *display: inline;
    *margin-right: 0.3em;
    *zoom: 1;
    ...   
}

工作示例：http://jsfiddle.net/cRKpD/1/

【讨论】：

添加下边距有助于防止框在浏览器狭窄时彼此叠放而没有间距。更新演示：jsfiddle.net/gnNTZ
@MattCoughlin 好电话 - 我没有考虑到这一点！我已经相应地更新了我的答案

【解决方案3】：

我知道我迟到了，但有人刚刚将这个问题与另一个类似的问题联系起来，我意识到这个问题错过了 flexbox 解决方案...
（当问题被问到时，它不在身边）。

添加所需的供应商前缀并删除 CSS 中不必要的前缀

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

example

【讨论】：

【解决方案4】：

对于第二个选项，代替“float: left”使用“display: inline-block”，您甚至可以将它与 text-align: center 结合使用，以始终填充 100%，除了最后一行

对于第一个选项，您可以将 1 和 5 放入 onw 容器中，将 2 和 6 放入另一个容器中，依此类推，然后将这些容器浮动

【讨论】：

【解决方案5】：

对于最后一个，您可以用一个容器围绕每组四人。然后在容器内浮动 div，如果您不想或不能手动执行此操作，您可以使用 JavaScript 轻松完成。

【讨论】：

【解决方案6】：

第一选择

CSS multi-column layout，一旦它得到充分的标准化和支持，可能会提供一种灵活的方式来做到这一点。

我想到的唯一其他 CSS 解决方案，虽然它可能没有足够的响应，是在列容器中对元素进行分组（1 和 5，然后是 2 和 6，然后是 3 和 7，然后是 4）。

除了这两个选项，我认为JS是必需的。

【讨论】：

【解决方案7】：

有点晚了，但把 1 放在一个额外的分隔符中。然后将 7 放入该分隔符（您必须调整分隔符，使 7 出现在 1 下方）。使用溢出可能有用：在此分隔符中可见。

【讨论】：

【解决方案8】：

我会像这样使用 jQuery 来做：

var max_height = divs_cnt = 0;

$("#holder .box").each(function() {
  if (divs_cnt % 4 == 0) {
    $(this).css("clear", "both");
  }
  if (max_height < $(this).height()) {
    $("#holder .box").height($(this).height());
  }
  max_height = $(this).height();
  divs_cnt ++;
})

#holder{
   width:100%;
   border:1px dotted blue;
   display:inline-block;
}
.box{
   width:100px;
   height:150px;
   background-color:#CCC;
   float:left;
   text-align:center;
   font-size:45px;
   display:inline-block;
}
.one{
   background-color:#0F0;
   height:200px;
}

.two{
   background-color:#0FF;
}

.three{
   background-color:#00F;
}

.four{
   background-color:#FF0;
}

.five{
   background-color:#0a1;
}

.six{
   background-color:#ec5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="holder">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
    <div class="box four">4</div>
    <div class="box five">5</div>
    <div class="box six">6</div>
</div>

【讨论】：