Поэтому я работаю над совместимостью с несколькими браузерами (в основном, для моего сайта в 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
float: left
здесь не полезно, так как плавающие элементы заканчиваются display: block
. Чтобы получить display: table-cell
для корректной работы, удалите float, а затем добавьте border-collapse: separate
и border-spacing: 0 10px 30px 10px
для display: table
элемент display: table
.
Здесь вариация вашего jsfiddle.