сделать плавающие 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

Добавить float:right к элементу .two div

Answer 2

Это невозможно, когда класс .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>

Answer 3

Вам нужно переместить класс .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 clearfix'>

to this one

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



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


</div>
</div>