Как верстают колонки в 2020?

Question

[magary4]

Должно выглядеть так:



Два столбца, первый заполнен картинкой, а в правом ещё 2 столбца, выравнивание одного по левому краю, а второго по правому. Как примерно сделать такое?

Сердечко и маркер поверх картинки по-прежнему делают position: absolute?

Answer 1

[Арсений Матыцин]

Прием, прием, из будущего 2021-го:
— Верстают все так же.

Comments

[magary4]

grid? flex? float?

[Арсений Матыцин]

Grid, flex, float, да. Последний с натяжечкой.

[Ярослав Иванов]

magary4, а где table ?
Арсений Матыцин, а как же mosaic browser

Еще можно на inline-block'ах но они поддерживаются только современными браузерами типо IE 6

[Арсений Матыцин]

Ярослав Иванов, тут не было юмора про float-ы, изображения все еще так и встраиваются в массив текста. Ничего не поменялось.

А таблицы. Чем табличная верстка-то плоха? Всякие GridView на ней и построены, никто не жалуется, туда же таблицы цен и т.д.

[magary4]

Ярослав Иванов, как бы ты сверстал?
я склоняюсь к flex

[Rustam Bainazarov]

magary4, именно так и сверстайте, если не нужна поддержка IE10. Начиная с IE11 это будет работать.

[magary4]

Рустам Байназаров, правый столбей одновременно является и чайлом и контейнером для этих пропертей

Skipper
Cabins:
Guests:
Price:
Length:

?? или как делают вложенность?

[Rustam Bainazarov]

magary4, что? :))

Answer 2

[Jan van Eyck]

Более адекватные и продвинутые персонажи - флекс и грид.
Менее адекватные, консервативные и неофобные - флоаты.
Встретить горизонтальную раскладку через таблицы наверно уже почти нереально.
Еще можно через абсолютное позиционирование вполне себе недурно сверстать.
В данном случае раскладка простая, так что скорее флексы, чем гриды.

сердечко и маркер поверх картинки по-прежнему делают position: absolute?

Да.