w3-css:响应不同高度块的3列布局

Question

我正在尝试用w3.css构建一个响应性好的网页布局。它应该考虑在大屏幕上有三列，在中型上有两列，在小型/移动设备上有一列。每一行都由两个固定高度之一的瓷砖组成。

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding ">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

我希望在3列布局的大屏幕中产生以下结果：

​

​

上面的代码对于一个列和两个列布局都很好，但是会产生以下三列不想要的输出：

​

​

如果我在三个瓷砖之后结束w3行填充，那么三列布局是可以的，但是有两列的中屏幕会导致混乱。

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

这就是上述代码在中等屏幕上产生的结果：

​

​

任何帮助都是非常感谢的。

Answer 1

这对你有好处吗？https://codepen.io/panchroma/pen/BmXOOe

HTML和您发布的内容完全一样，只是我在w3行填充中添加了“父”类。我们将使用这个类将CSS的子列作为目标。

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding parent">  <!-- note new class in this line -->
     .... 
    </div>  
  </div>

CSS是

@media (min-width: 993px){
  .parent .w3-col:nth-child(3n + 1){
    clear:left;
  }
}  

此css中的逻辑是当视口为993 of或更宽( w3.css网格从2列宽更改为3列宽)时，使用nth-子选择器选择行中的第1、4、7、10、. (3n +1)列并应用清除规则:左。这确保了该列将浮动到下一行的开头。

有关第n个子选择器如何工作的更多信息：

https://css-tricks.com/how-nth-child-works/

希望这能有所帮助！