<分区>
<分区>
我正在尝试弄清楚如何获得一个 flex 布局(或者其他一些布局，如果 flex 不是可行的方式)，这将允许我的示例中的 WIDGET 4 和 6 float 在 WIDGETS 1 和 3 的下方。因为 WIDGET 2 更大，所以它将其余部分推到它的高度。该解决方案需要灵活以允许更多的 WIDGET div，这些 div 会导致它们下面的内容出现类似问题。我希望所有 WIDGETS 都浮在上面一行的下方。
附带说明 - 我的所有 WIDGET div 都可以使用 jQuery UI 可排序插件进行排序 - 因此解决方案必须允许它们在排序后也“对齐”到位。
我怎样才能做到这一点？
#widgetWrapper {
padding:10px 15px;
position:relative;
display:flex;
flex-wrap:wrap;
flex-direction:row;
}
.widget {
width:33.3%;
box-sizing:border-box;
padding:10px 20px 10px 10px;
position:relative;
}<div id="widgetWrapper">
<div class="widget">
<p><strong>WIDGET 1</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="widget">
<p><strong>WIDGET 2</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="widget">
<p><strong>WIDGET 3</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="widget">
<p><strong>WIDGET 4</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="widget">
<p><strong>WIDGET 5</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
<div class="widget">
<p><strong>WIDGET 6</strong></p>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div>
</div>最佳答案
不幸的是，使用 display: flex 不容易做到这一点。然而，它是 display: grid!
您要查找的属性是 grid-auto-flow: dense;
这是一个例子:https://codepen.io/rachelandrew/pen/beBeKJ
它的工作原理是在元素放置在网格上时回填间隙。
另一种选择是使用像 masonry 这样的 javascript 插件。
关于html - 带有 float 元素的 CSS Flex 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46471492/