html - 使 float div 填充空白

Question

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

.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>

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

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

Answer 1

这是不可能的，当类 .two 向左浮动时。您必须为 .two 类使用 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'>

to this one

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



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


</div>
</div>