将div放在彼此之下

Question

想象我在父div中有6个div，如果我使用inline-block它将会显示如下

但我希望他们两个像这样出现。

Answer 1

不幸的是....

这不可能使用vanilla HTML和CSS（抱歉）。

您需要使用像isotope或Masonry这样的JS库，或者编写自己的javascript布局管理器。

澄清 - CSS专栏无法运作

对于错误的假设，这个答案已经被忽视了，这可以通过使用column-count的列布局来实现。不是这种情况。列从上到下排序，而不是从左到右排列新行。

This can be clearly seen in this fiddle

元素垂直排序，并且不遵循问题中提到的编号约定。

Answer 2

这称为mansory，检查这些可能会对你有所帮助：

http://masonry.desandro.com/

http://desandro.github.io/masonry/

无需提供代码，因为这里已经多次询问过这个问题，我只是给你一个搜索的关键。

这也可能有所帮助：

http://jsfiddle.net/prollygeek/hP6fS/

side1=0,side2=0
$(".flexbox").children().each(function(index, element) {
if(side1<=side2)
{
$(this).css("top",side1+"px") 
side1+=parseInt($(this).css("height"))
}
else if(side2<side1)
{
$(this).css("top",side2+"px")
$(this).css("left","50%") 
side2+=parseInt($(this).css("height"))
}

});

Answer 3

没有Javascript，没有Jquery =简单的CSS

https://jsfiddle.net/ssuryar/6hx63x9x/1/

HTML

<div class="wrapper"> <div class="box1"><span class="big-font">1</span></div> <div class="box2"><span class="big-font">2</span></div> <div class="box3"><span class="big-font">3</span></div> <div class="box4"><span class="big-font">4</span></div> <div class="box5"><span class="big-font">5</span></div> <div class="box6"><span class="big-font">6</span></div> </div>

CSS

.wrapper{ width:250px; float:left; height:auto; border:1px solid #5694cf;} .big-font {font-size:40px;color:#ffffff; font-weight:bold; font-family:verdana;} .box1{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:150px;line-height: 150px; float:left; display:table;} .box2{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:50px; float:right;display:table-cell;} .box3{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:150px; line-height: 150px;float:right;display:table-cell;} .box4{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:100px; line-height: 100px;float:left; display:table;} .box5{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:50px; float:right;display:table-cell;} .box6{min-width:100px; border:1px solid #000; background:#5694cf;text-align: center;margin:10px;height:100px; line-height: 100px;float:left; display:table-cell;}