使用网格W3.CSS停止交错的Div
使用网格W3.CSS停止交错的Div
提问于 2017-01-25 05:59:28
我正在用W3.CSS设计我的页面，并使用他们响应式的网格。我有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，但没有任何运气。不管怎样，有没有关于如何得到想要的结果的想法？谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-25 06:48:35
首先添加这个样式：
.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>Stack Overflow用户
发布于 2017-01-25 07:00:29
可能不完全是您想要的，但是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'
});
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41839716
复制相关文章
相似问题
腾讯云开发者
