Question

我使用W3.CSS设置我的页面样式并使用他们的repsonsive网格。我有4个div，我希望有一个类“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.3 W3.CSS

2 个答案: