2 Разметка столбцов с одинаковой высотой, столом или div?

Мне нужен макет с 2 столбцами, где каждый столбец расширяется до высоты более высокого столбца.

С таблицей я бы просто сделал:

<table class="parent">
    <tr>
        <td class="columnLeft">Column 1</td>
        <td class="columnRight">Column 2</td>
    </tr>
</table>

И столбцы 1 и 2 будут поддерживать одну и ту же переменную высоту.

С div существует некоторое решение (с использованием переполнения: скрытое и другое), для которого требуется много хаков, чтобы хорошо работать в кросс-браузере.

(jsFiddle здесь: http://jsfiddle.net/rJjJa/1/)

В этом случае я бы просто использовал таблицу, не требуя дополнительных усилий для хакеров CSS (или много дополнительной разметки). Считаете ли вы, что таблица подходит для этого?

Ответы

Ответ 1

Если вы хотите, чтобы div вел себя как таблица, вы можете использовать display: table-cell; для каждого div. Они должны вести себя как a td; оба должны быть одинаковой высоты. Это должно работать во всех современных браузерах и т.д. И выше.

Ответ 2

Тег <table> устарел для макетов! Не используйте его.

Вместо этого есть много Cross Browser CSS Compatible 2 Column Layouts, без использования каких-либо хаков. Одним из таких является Равные столбцы высоты.

Столбцы с одинаковой высотой

Неважно, сколько контента в каждом столбце, цвета фона всегда будут растягиваться до высоты самого высокого столбца.

Статья, подробно объясняемая здесь: Столбцы с одинаковой высотой с CSS-браузером.