使浮动 div 填充空白

Question

我有 3 个 div 的问题，当一个 div 比另一个 div 长时，它会产生一些空白。
我希望空格消失，divs 连接。
这就是我现在拥有的：

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: left;
margin: 5px;
}
.main{
width: 220px;

}
.info{
background: orange;
height: 200px;
width:100px;
float: left;
margin: 5px;

}

<div class='main'>
<div class='info'>

to this one

</div>
<div class='two'>



</div>
<div class='two'>
this one should be up


</div>
<div class='two'>



</div>
<div class='one'>



</div>
</div>

我有这些 class 的唯一原因是因为我想展示我的问题的一个例子，实际上所有 div 都有相同的 class.
谁能帮我解决问题？

正如你在我的图片中看到的，底部 div 没有连接到它上面的那个。
所有 div 都有 float: left;

Answer 1

您需要将 .two class 向右浮动。

float: right;

希望对您有所帮助 :>

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;
}

<div class='main'>
<div class='one clearfix'>

to this one

</div>
<div class='two'>



</div>
<div class='one'>
this one should be up


</div>
</div>

Answer 2

将 float:right 添加到 .two div 元素

Answer 3

这是不可能的，因为 class .two 向左浮动。您必须使用 float:right 代替 class .two。

.one{
background: lightgreen;
height: 300px;
width:100px;
float: left;
margin: 5px;
}
.two{
background: brown;
height: 500px;
width: 100px;
float: right;
margin: 5px;
}
.main{
width: 220px;

}

<div class='main'>
<div class='one'>

to this one

</div>
<div class='two'>



</div>
<div class='one'>
this one should be up


</div>
</div>

使浮动 div 填充空白

make floating divs fill whitespace

html

css

css-float