我正在尝试使用 w3.css 构建响应式布局。它由三种不同高度和宽度的瓷砖组成。布局在小屏幕上为单列，在中屏幕上为两列，在大屏幕上为三列(由 w3.css 确定)。
使用直接代码 ( https://jsfiddle.net/pwunsch/p2nL28f3/2/ )...
<body class="w3-gray" id="home">
<div class="w3-content w3-white" style="max-width:400px">
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12"><div class="normal">1 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">2 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">3 - normal article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">4 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">5 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">6 - short article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">7 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">8 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">9 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">10 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">11 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">12 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">13 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">14 - normal article</div></div>
</div>
</div>
</body>
...我遇到的问题是，每当一行中包含的图 block 高于该行中的最后一个图 block 时，下一个图 block 将位于同一行中，而不是在新行中(参见图 block 13/下例中的 14)。这实际上是我理解 float: left 应该工作的方式。
只要所有图 block 的宽度都相等，这个问题就可以通过设置 clear: left; 属性和 :nth-child() 选择器来轻松解决每 3 个或每 2 个图 block (取决于屏幕尺寸)。
然而，在这种情况下，对于两列宽的图 block ，没有这样简单的计数规则。然而，格式化规则很简单，只要一个图 block 填满最后一列，下一个图 block 就应该接收一个 clear:left 属性。但是我不知道如何在 CSS 中实现这一点。 JavaScript 也可以。
感谢任何帮助。
最佳答案
一个可能的解决方案是从 w3.css 切换到 bootstrap 4。Bootstrap 4 使用 flexboxes 而不是 floats。 flex 盒在上述布局中的行为符合预期。代码很简单 ( https://jsfiddle.net/pwunsch/u35sd03u/ )。
<body>
<div class="container" id="content">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">1 - normal article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">2 - short article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">3 - normal article</div></div>
<div class="col-sm-12 col-md-12 col-lg-8"><div class="special">4 - special article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">5 - normal article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">6 - short article</div></div>
<div class="col-sm-6 col-md-12 col-lg-8"><div class="special">7 - special article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">8 - short article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">9 - short article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">10 - short article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">11 - normal article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">12 - normal article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="short">13 - short article</div></div>
<div class="col-sm-6 col-md-6 col-lg-4"><div class="normal">14 - normal article</div></div>
</div>
</div>
适用于上述场景。我没有找到任何明显的方法来修补/修改 w3.css 来做同样的事情。
关于css - 具有不同尺寸瓷砖的响应式布局；设置适当的换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47961716/