w3-css：具有不同高度块的响应式3列布局

Question

我正在尝试使用w3.css构建响应式Web布局。它应该是在大屏幕上有三列的行，两个在中等，一列在小/移动设备上。每行由瓷砖组成，瓷砖可以具有两个固定高度中的一个。

<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-row-padding，那么三列布局就可以了，但是我对两个列的中画面感到困惑

<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与您发布的完全相同，只是我已经将'parent'类添加到w3-row-padding中。我们将使用此类来使用CSS定位子列。

HTML

<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中的逻辑是当视口为993px或更宽时（w3.css网格从2列宽变为3列宽的宽度），使用第n个子选择器选择第1个，第4个，行中的第7，第10，...（3n +1）列并应用clear：left的规则。这可确保此列将浮动到下一行的开头。

有关第n个子选择器如何工作的更多信息：
https://css-tricks.com/how-nth-child-works/

希望这有帮助！