Question

如果我浮动：留下一堆具有相同尺寸的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左边的空白区域？

Answer 1

听起来你正在寻找masonary类型的布局。这是一篇很好的博客文章。

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

Answer 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列轻松实现此效果。

不同大小的Div不能正确浮动

2 个答案: