显示一个低于另一个 [英] Display Divs one below the other

问题描述

我有一个父级div，它是 100％宽度和500px高度。

I have a parent div which is 100% width and 500px height.

现在我想要放置多个 div s，其大小相同 width：250px; height：80px 一个在另一个之下，一旦它跨越父div的高度，它应该从当前列的 div s的右边开始。

Now I want to put multiple divs of same size width:250px; height:80px one below the other and once it crosses the height of the parent div it should start to the right of the current column of divs.

推荐答案

您需要CSS列布局。像这样：

You need CSS column layout. Something like this:

#parent {
    width: 100%;
    height: 500px;
    background: #eee;

    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
#parent .box {
    width: 250px;
    height: 80px;
    background: #AAA;
    margin-bottom: 10px;
    display: inline-block;
}

演示： http://jsfiddle.net/J8A24/

支持：浏览器支持图表。
进一步阅读：多列

对于IE，您可以想要使用众多polyfill中的一个或保持原样，内联块将优雅地降级为IE。

For IE you may want to use one of the many polyfills or leave it as is, inline-blocks will gracefully degrade for IE.

这篇关于显示一个低于另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！