Как реализовать четыре колонки одинаковой резиновой высоты?

Question

[ixon]

Нужно сделать 4 колонки одинаковой высоты с помощью CSS+HTML. JS и Jquery не канают. Если в одной колонке содержимого больше чем в другой, то другая должна автоматически увеличить свою высоту.
Пример:

Answer 1

[Денис Инешин]

<table>

Comments

[ixon]

Table получится без отступов между колонками.

[Денис Инешин]

Да с чего бы, что мешает представить отступы в виде ячеек таблицы, пустых, с прозрачным фоном?

[ixon]

@IonDen а не изобретение-ли это велосипеда, ладно всё равно через пару часов отмечу это как решение тоже.

[Денис Инешин]

@ixon Изобретение велосипеда?)) Да мы так еще 10 лет назад верстали)

[stas]

а что мешает представить отступы между ячейками с помощью падинга? а внутри для фона использовать див-врапер контента?

[Виталий Киренков]

Вариант в таблицей самый лучший в данном случае. Это можно сделать и с дивами, но их будет много и большая вложенность.

[Алексей Павлов]

таблицу не получится сделать адаптивной, а блоки (дивы) можно расположить 2х2, а не 4х1.

[begemot_nn]

@lexxpavlov "таблицу не получится сделать адаптивной, " width у таблицы и у ячеек можно указывать в %

[Алексей Павлов]

@begemot_nn понятно, что ширину ячеек можно сделать резиновой, но не от этого ячейки не станут адаптивными. Часть ячеек таблицы нельзя переместить на другую строку: вот так

[begemot_nn]

@lexxpavlov полностью согласен. так как на рисунке с таблицей поступить нельзя.

[Алексей Павлов]

@begemot_nn что я и отметил в своём комментарии. А, судя по картинке из вопроса, автору может понадобиться такая возможность адаптивности.

[begemot_nn]

@lexxpavlov вы видимо много проектируете интерфейсы, (никакой иронии) раз по картинке смогли определить, что автору потребуется адаптивность (в смысле - выстраивание этих блоков вертикально, при малой ширине экрана у просматривающего) но при вертикальном расположении блока - ни к чему следить за их высотой. одинаковая высота явно нужна, чтобы между этими колонками и общим футером не было некрасивых зубов :)

[Алексей Павлов]

@begemot_nn сегодня ему не надо, а завтра может понадобиться. Я же не утверждаю. В своём первом комментарии я всего лишь отметил этот факт, чтобы автор вопроса мог иметь это в виду. Я не сторонник использования таблиц в верстке, особенно в тех случаях, когда можно обойтись (см. соседние ответы). Но если автор вопроса решит использовать их - пожалуйста. Я всего лишь поделился своим опытом по этому поводу, и не собирался развивать эту тему.

[begemot_nn]

@lexxpavlov и я с вами полностью согласен. я с некоторых пор тоже стараюсь не использовать таблицы для "нетабличных данных". но иногда, это так успокаивает нервы :)

Answer 2

[vdem]

htmlbook.ru/css3-na-primerah/mnogokolonochnyy-tekst
(Но не уверен, что это то, что нужно)

Comments

[Денис Инешин]

Совсем не то

[vdem]

Да уже вижу, невнимательно условие прочел..

[vdem]

htmlbook.ru/blog/div-nye-kolonki-odinakovoy-vysoty...

[Денис Инешин]

@vdem тоже самое что и таблицей, просто дивам задаем стили table-cell и т.п.

Answer 3

[Андрей Голуменов]

Например, так
используем display: table и псевдоэлемент :before для закраски отступов белым фоном
или так, используя таблицы и прозрачные бордеры

Comments

[begemot_nn]

использование у div display: table - это решение для случая "делай что угодно, но сверстай дивами а не таблицами" :)

[Андрей Голуменов]

Во первых: Зачем верстать не табличные данные таблицами?
Во вторых: Как вы сделаете отступы только справа и слева у ячеек таблицы?
В третьих: Верстка таблицами по объему будет больше и сложнее в поддержке
В четвертых: Верстка таблицами на данный момент не актуальна

У вас есть что мне возразить по вышеперечисленному?
И посмотрите на код, там только один div - обвертка, а внутри маркированный список. Так будет семантически более правильно, чем все запихивать в таблицу.

[begemot_nn]

@Golumenov Видите ли, я не хочу вступать с вами в спор, я уважаю ваш опыт.
Я согласен с вашими утверждениями кроме, пожалуй того, что верстать маркированным списком явно колоночные данные - это нифига не "более семантично".
Меня вообще пугает современная тенденция верстать все списками..

[Андрей Голуменов]

@begemot_nn да можно сверстать чем угодно, списками, дивами, спанами или тем. что больше подходит с точки зрения семантики, но только на сегодня, так уж устоялось, что в таблицах должны быть ТОЛЬКО табличные данные (например таблица удельной тепло-проводимости в зависимости от среды). Использовать таблицы для оформительских целей сегодня считается дурным тоном и каменным веком web-а

[Юрий Лобанов]

@Golumenov воу-воу, полегче. Раз уж раскидываетесь определениями — будьте добры пояснить, с чего Вы взяли, что перед нами не табличные данные? )

[Андрей Голуменов]

@iiil А с чего вы взяли, что это табличные данные? В вопросе нигде таблицы не упоминаются.
Ну, а если все-таки таблица, то можно сверстать так: codepen.io/golumenov/pen/nEbrL
Используются прозрачные border-ы

[Gran Torino]

Андрей Голуменов: не путайте табличную разметку с имитированием ее в css

Answer 4

[Юрий Лобанов]

Table получится без отступов между колонками.

Да с чего бы, что мешает представить отступы в виде ячеек таблицы, пустых, с прозрачным фоном?

Такое ощущение, что все вдруг забыли, как верстали таблицами :)
codepen.io/iiil/pen/kBuCj

Comments

[Gran Torino]

говносовет, и говновремена прошли, семантику нужно учитывать, есть css представление таблиц, тафиг в разметку тулить таблицу?