Css и html 2 div на одной строке, затем перейти к следующей строке

Question

Привет, я делаю страницу, где мне нужно иметь 2 div на одной строке, затем автоматически перейдет на новую строку и сделает там 2 divs и так далее.

Image about how it looks now

Мне нужно два из коробки на одной линии, то он должен начать автоматический на следующей строке, а затем есть 2 коробки на линии 2 она идет в строке 3

Answer 1

Вы можете использовать CSS's nth-child pseudo-class selector ,

Во-первых, установить div элементы для float, чтобы получить их рядом друг с другом:

div { 
    float: left; 
} 

Введем теперь селектор nth-child, чтобы каждый другой div ясный предыдущий поплавок:

div:nth-child(2n+1) { 
    clear: left; 
} 

JSFiddle demo.

Answer 2

Вы можете установить все divs для отображения: inline-block, а затем поставить тег <br> всякий раз, когда вы хотите новую строку.

В качестве альтернативы вы можете установить все divs для отображения: встроенный блок и поместить их в контейнер, в котором есть достаточно места для двух разделов, но недостаточно места для трех разделов. Они должны переполняться до следующей строки автоматически, поэтому вам не нужно добавлять теги break.