Question

我正在开发一个响应式网页设计，将4列中的多个项目并排放置。这些物品的高度不同，因此漂浮不起作用。

这就是目前发生的事情：

floating wrong http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

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

floating right http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

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

有没有纯CSS（CSS3）方式？有些窍门吗？

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

floating different http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

现在第5行，第6行和第7行并没有像你期望的那样“真正”浮动，但内部有一个隐藏的换行符（clearfix）。

纯CSS有没有办法解决这个问题？例如。使用nth-child(4n+4)和像:after这样的伪选择器来应用content的换行符？

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

Answer 1

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

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

jsFiddle demo

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

Answer 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

Answer 4

对于第二个选项，“float：left”的instad使用“display：inline-block”，你甚至可以将它与text-align：center结合起来，总是填充100％，除了最后一行

对于第一个选项，您可以将1和5放在onw容器中，将2和6放在另一个容器上，然后将其中一个放入那些容器

Answer 5

对于最后一个，你可以用容器包围每组四个。然后将div放在容器内部，如果你不想或不想手动执行此操作，可以使用JavaScript轻松完成。

Answer 6

第一个选项

CSS multi-column layout，一旦得到充分的标准化和支持，就可以提供灵活的方式来实现这一目标。

唯一想到的其他CSS解决方案，虽然可能没有足够的响应能力，但是将列中的元素分组（1和5，然后是2和6，然后是3和7，然后是4）。

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

Answer 7

有点晚，但在另一个分频器中加1。然后在该分隔符中放入7（您必须调整分隔符，使得7出现在1以下）。使用溢出可能很有用：在此分隔符中可见。

Answer 8

我会像这样使用 jQuery：

c = df.groupby('type').cumcount()
df.set_index([c, df['type'].values]).stack().unstack([1, 2])

     A              B              C       
  type   qt  vol type   qt  vol type qt vol
0    A    1   10    B    3   11    C  4  20
1    A    2   12    B    4   20    C  4  20
2    A    1   12    B    4   20    C  4  20
3  NaN  NaN  NaN  NaN  NaN  NaN    C  4  20

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 ++;
})

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

8 个答案: