Выравнивание динамических divs

Question

Что делать с динамическими ячейками div, чтобы он автоматически перемещался в два столбца, где доступно пространство в соответствии с захватом?

Порядок коробки, как:

1. UND: Понимание энергии
2. Ep1: Водоемы и геологии
3. EP2: Exploration я
4. EP3: Exploration II и так далее

Его уже поплавок слева, а его родительский div имеет фиксированную ширину, чтобы показать их в два столбца. Я также применил очистить оба (div.column:nth-child(odd){ clear:both;}) от нечетных элементов, третий - в правильном положении, но четвертый div не работает. Четвертый имеет много места сверху.

Благодаря Dipender Сингх

Answer 1

Одним из решений является добавление дочерних Div до единственного основного дел. затем добавить поплавок оставил CSS свойство для всех что-то дочернего Div как это:

<div> 
    <div style="float:left">What ever content</div> 
    <div style="float:left">What ever content</div> 
    <div style="float:left">What ever content</div> 
    <div style="float:left">What ever content</div> 
    <div style="float:left">What ever content</div> 
</div> 

Просто обратите внимание, что в зависимости от ширины экрана и ширины этого решения отдельного ребенка Div не будет ограничивать количество столбцов до двух. Поэтому, если вам нужны только два столбца, вы должны подумать о добавлении стиля max-width в главный div, который ограничит столбцы только двумя.