停止使用网格交错的 Div W3.CSS

Question

我正在使用 W3.CSS 设计我的页面样式并使用他们的响应式网格。我有 4 个 div，我希望它们具有 class "w3-col s6 l3"，当 W3 检测到一个小屏幕时，它会按应有的方式放置列，但会错开它们。我希望 div 的顶部彼此齐平。

<div class="w3-row">
  <div class="w3-col s6 l3 w3-green w3-center">
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-dark-grey w3-center">
    <p>s6</p><p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-blue w3-center">
    <p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-grey w3-center">
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p>
  </div>
</div>

这是大屏幕的样子：

这是小屏幕的结果：

这就是我想要完成的：

我通过以下方式得到了这个例子 http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_two_equal&stacked=h 并在节中添加段落。我尝试制作一个 jsfiddle，但没有任何运气。无论如何，对如何获得预期结果有什么想法吗？谢谢！

Answer 1

首先添加这个样式：

.flex {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
flex: 1;
min-width: 400px;/*or how much you want. It means that if your page has width higher than 800px divs are side by side picture one but if it is lower than 800px they go upon each other picture 3*/
}

.w3-col {
    flex: 1;
/*If you do not use min-width: 400px, here must set a width or min width*/
}

然后将 html 代码更改为：

<div>
        <div class="w3-row flex" >
            <div class="flex">
                <div class="w3-col s6 l3 w3-green w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
                <div class="w3-col s6 l3 w3-dark-grey w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
            </div>
            <div class="flex">
                <div class="w3-col s6 l3 w3-blue w3-center">
                    <p>s6</p>
                    <p>s6</p>
                </div>
                <div class="w3-col s6 l3 w3-grey w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
            </div>
        </div>
    </div>

Answer 2

可能不是您想要的，但 here 是一个与 jQuery 一起很好地工作的解决方案。这在 div 为宽度的一半时有效，您可以轻松修改它以采用您想要的任何参数。

$('div:nth-child(2n)').each(function(){
  var height = $(this).height(),
      prevHeight = $(this).prev().height(),
      padding = prevHeight - height;

  if(padding > 1) {
    $(this).css({
      'margin-bottom': padding + 'px'
    });
  }
})

停止使用网格交错的 Div W3.CSS

Stop Staggered Divs with Grids W3.CSS

html

css

responsive

w3.css