Auto-position divs side-by-side

Question

У меня есть сгенерированный код HTML.

Когда я добавить float:left; на общий класс, это выглядит следующим образом:

+----------------+ +--------------+ 
| div 1  | | div 2  | 
|    | |    | 
|    | +--------------+ 
|    |     
|    | +--------------+ 
|    | | div 3  | 
+----------------+ +--------------+ 

И то, что я хочу это:

+----------------+ +--------------+ 
| div 1  | | div 2  | 
|    | |    | 
|    | +--------------+ 
|    |     
|    | 
|    | 
+----------------+ 

+--------------+ 
| div 3  | 
+--------------+ 

Как я могу получить этот результат?

Мой CSS код выглядит следующим образом:

position: relative; 
width: 40%; 
float: left; 
border: 1px solid black; 
clear: left; 

Answer 1

Если предположить, что дивы имеют общее название класса, такие как .boxes, добавьте этот CSS:

.boxes:nth-child(odd) {clear: left;} 

Это сделает так, что каждый нечетный номер очистит float и запустит новую строку.

В качестве альтернативы, установите ширину контейнера так, чтобы бок о бок установил только два прямоугольника, а затем используйте display: inline-block вместо float: left;.

Answer 2

просто добавить clear: left; к DIV 3

EDIT: просто использовать :nth-child(2n+1) или :nth-of-type(2n+1) CSS3 селекторы

Answer 3

Добавить элемент с Свойство CSS clear: both; после того, как 2-й DIV, что-то вроде:

<div id="first"></div> 
<div id="second"></div> 
<br class="clear_both" /> 
<div id="third"></div> 

Тогда в CSS:

.clear_both { 
    clear:both; 
    height:0; 
    width:0; 
}