Question

我正在尝试使用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>

...我遇到的问题是，每当一行包含的行高于行中的最后一行时，以下的tile位于同一行，而不是新行（参见tile 13 /以下示例中的14）。这实际上是我理解float: left应该起作用的。

example of unwanted layout

只要所有图块宽度相等，就可以通过在每个第3个或每个第2个图块上设置clear: left;属性和:nth-child()选择器（具体取决于屏幕大小）来轻松解决此问题。

然而，在这种情况下，对于两列宽的图块，没有这样简单的计数规则。然而，格式化规则很简单，每当一个图块填充最后一列时，下一个图块应该会收到clear:left属性。但是我不知道如何在CSS中实现这一点。 JavaScript也没关系。

感谢任何帮助。

Answer 1

一种可能的解决方案是从w3.css切换到bootstrap 4. Bootstrap 4使用flexbox而不是浮动。 Flexbox在上述布局中的行为与预期相同。代码很简单（https://jsfiddle.net/pwunsch/u35sd03u/）。

适用于上述场景。我没有找到任何明显的方法来修补/修改w3.css来做同样的事情。

响应式布局与不同大小的瓷砖;设置正确的换行符

1 个答案: