2 блока в 2 колонки, как сделать?

Question

[Mark]

Немного запутался, помогите пожалуйста разобраться.
1) Требуется сделать как на изображении:
картинка, заголовок.
2) как я это представляю это будет в одном диве
3) сделать чтобы было именно в 2 колонки.
Вся эта конструкция будет прикручена к админке в php коде, и когда добавляем файл этот див будет дублироваться и надо сделать чтобы он не по горизонтали шел, а именно в 2 колонки.
Я немного запутался, надеюсь уже глядя на изображение вы поняли суть. Как это реализовать?

Answer 1

[Erick_Flatcher]

Ну Flexbox, наверное. И поддерживается хорошо, и просто, и оформить можно.

Answer 2

[Полина Емельянова]

column-count свойства.
Поставьте column-count на родителя, а потомков сделайте инлайн-блочными. Кроме того вы так и по вертикали легко сможете блоки выровнять.

Answer 3

[Александр]

при всей нелюбви сейчас к таблицам, я вижу здесь именно её, если не требуется адаптивной верстки, то это таблица.

Comments

[Mark]

как раз и адаптивная верстка, да даже и дивом сделать можно, но меня вопрос волнует, как это будет автоматически переноситься. т.к. содержимое блоков будут добавляться из админки, а не вручную в коде

[Александр]

Mark: тогда нужен пример верстки.

а не вручную в коде

, это совсем не понятно, в ручную или не в ручную это как?

[Виктор Янышев]

lebonnet: Серьёзно таблица?

[Mark]

lebonnet: подсказали решение, это Flexbox в общем

[Александр]

Виктор Янышев: да, а вы тоже предложите flexbox, или display: table-cell?
Я очень "за" применения ccs3, но так же считаю, что сейчас нужно верстать и писать под ie9+

[Максим]

lebonnet: единственный конкурент flex это display:table;

[Виктор Янышев]

lebonnet: flexbox - почему бы и нет, при условии от какого ie. Ну на крайний случай float, ну никак таблица.

[Александр]

Виктор Янышев: покажите как сделать для ie9+ выравнивание по высоте (картинка + заголовок) как на приведенной в задание картинке.
Еще раз повторюсь, я за flexbox и других ccs3 приемов, но мы живем в реальных условиях, для высокопосещаемых ресурсов нужен ie9+ (если не ie8+), и честно не понимаю почему все так хают таблицы, если не нужен Media Queries (я не говорю, что нужно все верстать на таблицах, но в конкретном случае, лично я сверстал бы таблицей)

[Виктор Янышев]

lebonnet: Ответы потихоньку в оффтоп превращаем ;)

оффтоп

Как вариант через position. Та что ходить вокруг да около, в вопросе край ИЕ не указан, можем понижать версию до посинения. Изначально, я критично отнёсся к ответу про использование таблицы, её использовать можно если нагрузка в вёрстке контентная, а не представление документа. И тут уже без разницы, хоть ie6.