27

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

这是目前发生的情况：

浮动错误

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

向右浮动

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

有没有纯 CSS (CSS3) 的方法？有什么技巧吗？

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

浮动不同

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

纯CSS有什么办法吗？例如，使用nth-child(4n+4)和伪选择器喜欢用?:after应用换行符content

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

4

8 回答 8

35

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

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

jsFiddle 演示

于 2012-08-04T20:53:04.007 回答
21

正如@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/

于 2012-08-04T22:04:26.967 回答
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;
}

example

于 2016-02-21T03:07:04.910 回答
0

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

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

于 2012-08-04T21:46:18.463 回答
0

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

于 2012-08-04T22:04:24.333 回答
0

第一个选项

CSS 多列布局一旦得到充分的标准化和支持，就可以提供一种灵活的方式来做到这一点。

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

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

于 2012-08-04T22:51:20.087 回答
0

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

于 2014-10-08T08:04:12.860 回答
0

我会像这样使用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>

于 2020-12-30T16:08:16.387 回答