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

0

Поэтому я работаю над совместимостью с несколькими браузерами (в основном, для моего сайта в IE).

На одной странице у меня есть <figure> repeat, и я хочу, чтобы их высота была одинаковой. Мне сказали, что использование display: table-cell сделает это, поэтому моя разметка выглядит так:

<div class="table-container">
    <div id="projects">
        <figure>

        </figure>
        <figure>

        </figure>
        <figure>

        </figure>
    </div>
</div>

Моя таблица стилей (ie.css) выглядит так:

html[data-page-id="code"] #code .table-container {
    display: table;
}
html[data-page-id="code"] #projects {
    width: 100%;
    overflow: hidden;
    display: table-row;
}
    html[data-page-id="code"] #projects figure {
        float: left;
        display: table-cell;
        width: 290px;
        background: #c1c1c1;
        padding: 10px;
        margin: 0 10px 30px 10px;
    }

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

Здесь jsfiddle

Теги:

1 ответ

0

float: left здесь не полезно, так как плавающие элементы заканчиваются display: block. Чтобы получить display: table-cell для корректной работы, удалите float, а затем добавьте border-collapse: separate и border-spacing: 0 10px 30px 10px для display: table элемент display: table.

Здесь вариация вашего jsfiddle.

  • 0
    Я не видел никаких изменений вообще
  • 0
    В какой версии браузера? В вашей версии скрипки я вижу три коробки разных высот и три коробки одинаковой высоты с моей версией.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню