使浮动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都有浮动：左边;

Answer 1

您需要将.two类浮动到右侧。

float: right;

希望这会有所帮助：＆gt;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

当班级.two向左浮动时，这是不可能的。 您必须使用float:right替代课程.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>