如何使不同高度的元素浮动？[英] How to float elements with different heights?

问题描述

我正在研究一个响应式的网络设计，该网络设计将多个项目浮动在4列并排.这些物品的高度不同，因此漂浮无法正常工作.

这是目前发生的事情:

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

我想这应该与jQuery的"砖石"一起使用，对吗?但是我正在使用zepto.js，我想一个jQuery插件无法正常工作.

是否有任何纯CSS(CSS3)方法?一些技巧左右?

如果这与纯CSS或JS不起作用，可以做到这一点:

现在，第二行5、6和7不是"真正的"浮动您所期望的方式，但是内部有一个隐藏的线路破坏(clearfix).

有什么方法可以使用纯CSS?例如.使用nth-child(4n+4)和一个像:after这样的伪选择器，以content?

对此有什么想法吗?有什么聪明的技巧可以做到这一点?

推荐答案

您只需向每个第五元素应用一个清晰​​的元素即可迫使它在左侧启动.我认为在CSS3:

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

jsfiddle demo

其他推荐答案

如@ArielJuod所述，您可以使用display: inline-block而不是float.这样做的优点是它将在所有浏览器(包括下面的IE7+)中起作用，并且完全流畅:

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

工作示例: http://jsfiddle.net/crkpd/1/1/

其他推荐答案

我知道我参加了聚会迟到，但是有人将这个问题链接到另一个类似问题，我意识到这个问题错过了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;
}

示例

本文地址：https://www.itbaoku.cn/post/565629.html