Div的不同大小不正确浮
问题描述：
如果我漂浮的：留下一堆是相同尺寸的div，它似乎运作良好，例如： divs properly floatingDiv的不同大小不正确浮
然而，如果申报单的一个是比其他人高，只有第一个div会浮在左边，其余的都被推到右边。我可以通过增加例如divtwo的高度重现此：
div.divone{
width:100px;
height:100px;
background-color: red;
border-style: solid;
border-color: blue;
float: left;
}
div.divtwo{
width:100px;
height:250px;
background-color: green;
border-style: solid;
border-color: blue;
float: left;
}
<div class="divone">abc</div>
<div class="divtwo">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
我应该怎么做才能让那些小的div正确适合的空白高大div的左边？
答
听起来像你正在寻找masonary类型的布局。这是一篇很好的博客文章。
https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.64f1qm9a
答
div {
width: 100px;
height: 100px;
break-inside: avoid-column;
}
#red {
\t background-color: red;
}
#green {
\t height: 250px;
\t background-color: green;
}
#blue {
\t background-color: blue;
}
#yellow {
\t background-color: yellow;
}
#orange {
\t background-color: orange;
}
body {
width: 300px;
columns: 3;
}<body>
\t <div id="red"></div>
<div id="yellow"></div>
\t <div id="green"></div>
\t <div id="blue"></div>
<div id="orange"></div>
</body>您可以使用CSS列，很容易达到这种效果。