不同大小的 div 不能正确浮动答案

【问题标题】：Divs of varying size don't float correctly不同大小的 div 不能正确浮动
【发布时间】：2016-09-16 10:38:12
【问题描述】：

如果我 float:left 一堆相同尺寸的 div，它似乎工作得很好，例如： divs properly floating

但是，如果其中一个 div 比其他 div 高，则只有第一个 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>

An image of the two examples side by side with an arrow pointing to where I'm expecting the divs to go

我应该怎么做才能让这些小 div 正确地适合高 div 左侧的空白空间？

【问题讨论】：

标签： css

【解决方案1】：

听起来您正在寻找砖石类型的布局。这是一篇不错的博文。

https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.64f1qm9a

【讨论】：

【解决方案2】：

Taken from my answer here.

div {
  width: 100px;
  height: 100px;
  break-inside: avoid-column;
}
#red {
	background-color: red;
}
#green {
	height: 250px;
	background-color: green;
}
#blue {
	background-color: blue;
}
#yellow {
	background-color: yellow;
}
#orange {
	background-color: orange;
}
body {
  width: 300px;
  columns: 3;
}

<body>
	<div id="red"></div>
    <div id="yellow"></div>
	<div id="green"></div>
	<div id="blue"></div>
    <div id="orange"></div>
</body>

您可以很容易地使用 CSS 列来实现此效果。

【讨论】：