如何使不同高度的元素浮动?[英] 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

相关标签/搜索