Делаем ряд div одинаковой высоты с помощью CSS

Сделать их абсолютно одинаковой высоты может быть непросто, но если они просто должны казаться одинаковой высоты, вы можете воспользоваться техникой искусственные колонны.

Я пробовал несколько других методов, но это самый надежный способ получить эффект, который я нашел, кроме, конечно, использования таблиц.

Вы можете использовать JavaScript, но, конечно, он сломается без включенного JavaScript. Еще есть таблицы, но это разрушает суть CSS. Возможно, ответ Шонба может сработать, поместите фоновое изображение, которое создает иллюзию, что все столбцы идут вниз. Это известно как искусственный фон.

Или сидите и ждите, пока display: table-cell будет поддерживаться всеми / большинством браузеров.

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

Я первый, кто выбрал несемантический дизайн, поверьте мне, но иногда вам приходится сталкиваться с тем фактом, что семантическая разметка CSS + работает не для всех сценариев дизайна. Я не знаю потребностей этого сайта в доступности, но я бы порекомендовал вам найти более практическое решение этой проблемы.

Приветствую вас за то, что вы подходите к этой проблеме правильно и ищете правильный способ ее решить! К сожалению, это один из темных уголков CSS (наряду с вертикальным позиционированием внутри блока), который просто невозможно обойтись без искусственных столбцов, javascript или ячеек таблицы.

Что бы вы ни выбрали, пожалуйста, не придерживайтесь стандартов ради них самих.

Спасибо за ответы, ребята. Я не думаю, что фоновое изображение будет работать, потому что ширина столбцов также может варьироваться в зависимости от количества столбцов (пользователь может изменить это). Думаю, я буду использовать таблицы :(

Хорошо, стол оказался немного сложнее, чем я думал. Оказывается, решение Javascript на самом деле является самым простым (для моей ситуации), поскольку мое приложение является приложением AJAX, а фреймворк использует Prototype.js. Все, что нужно, - это несколько строк JS:

$$('div.container').each(function (element) {
 var longest = 0;

 element.descendants().each(function (child) {
  if (child.getHeight() > longest)
   longest = child.getHeight();
 });

 element.descendants().each(function (child) {
  child.style.height = longest + 'px';
 });
});

Спасибо еще раз за помощь.

Если вы ищете вариант с чисто css, и вы можете отделить фон блока от содержимого, тогда ответ будет два: два бита кода для каждого блока, один для содержимого, один для фона. вот как это делается:

<div id = "wrapper">
  <div class = "content" id='one>
  <div class = "content" id = "two>
  <div class = "content" id = "three>
  <div class = "background" id = "back-one">
  <div class = "background" id = "back-two">
  <div class = "background" id = "back-three">
</div>

Разместите блоки содержимого с помощью чисел с плавающей запятой. Затем разместите фон, используя абсолютное позиционирование (и z-index, чтобы поместить их позади).

Это работает, потому что поплавки могут устанавливать высоту, а абсолютно позиционированные элементы могут иметь высоту 100%. Это немного беспорядочно, но работает.