Как выровнять контент с помощью div'ов?

Question

[Алексей]

Нужно упорядочить контент как показано на рисунке, в два столбик с чередующимися форматами (текст/картинка/текст/картинка и тд). Пока в качестве полумер сделал на таблице, но интересно как реализовать данное решение на div, очень важно, что бы все параметры были прописаны в Div (в style), а не в отдельном сегменте со стилями или таблице.

Answer 1

[Андрей Ежгуров]

Смотри в сторону параметров css: display: table-cell (обеспечивает для div такое же поведение, как и для td; в частности, автоматическое выравнивание по высоте стоящих в одной строке div'ов). И display: flex (это вообще принципиально новый механизм html-вёрстки) - frontender.info/a-guide-to-flexbox

Еще очень простой, но ограниченный по возможностям механизм: display: inline-block. Вполне подойдёт, если между ячейками нет рамок.

Answer 2

[Сергей Протько]

очень важно, что бы все параметры были прописаны в Div (в style)

Фу, очень важно что бы вы не пользовались инлайн стилями.

Вообще все это нормально разруливается через float: left + clear: left у каждого 2n элемента.

Comments

[Андрей Ежгуров]

Нормально разруливается до тех пор, пока высота у div'ов в одной строке фиксированная. А как только высота соседних div'ов становится разной, тут уже float'ы не справляются.

[Алексей]

Да, всё будет одной высоты.

[Сергей Протько]

eandr_67: для этого и нужен clear: left. Ну или display: inline-block - он справится замечательно разве что придется удалить пробелы между блоками или поиграться с letter-spacing.

В целом же на данный момент идеальным вариантом решения этой задачи будут flexbox-ы или в случае необходимости поддерживвать старые браузеры (типа IE9 или 2.3 андроид) dislpay: table.

Answer 3

[President42]

jsfiddle.net/k31zp2f7 - что-то типа этого?
Там display: table-cell используется
Вырвиглазные цвета и контуры - для того, чтобы сразу видно было, где начинаются и заканчиваются блоки)

Answer 4

[Тимофей Белоусов]

Как-то так