Разновидности сиблинга соответствуют высоте в контейнере

У меня есть три divs в контейнере: http://jsfiddle.net/fBe9y/

У одного div есть много контента. Как получить два других div s с меньшим количеством содержимого, чтобы соответствовать высоте самого длинного div?

Я попробовал добавить height: 100% ко всем div s, но он не работает, потому что для этого потребуется height on div.container, который я не знаю перед рендерингом.

Ответ 1

Я рекомендую использовать для этого display: table-row; и display: table-cell;. Короче говоря, то, что вы делаете, это компоновка таблицы, но с использованием тегов <div>, а затем стиль их поведения, как таблица.

Это лучше, чем просто использование таблицы по причинам семантики и доступности.

Но, вообще говоря, CSS не дает вам много способов ссылаться на элементарных братьев таким образом. Тег <table> делает, но затем он сбивает с экрана читателей и многое другое.

Если вам нужно больше строк, у вас будет больше .container <div> s, а затем создайте еще один <div>, обернув их все и дайте ему display: table;.

Итак, с тем же HTML, что и вы, этот CSS делает то, что вы хотите:

.container
{
    display: table-row;
}

.tile
{
    display: table-cell;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}

См. Fiddle.

Примечание: while display: table; et al. широко поддерживается, IE не добавлял поддержку до версии 8. Если вы планируете поддерживать это для IE 7 или ниже, вы будете вынуждены использовать более сложный подход, например @Hristo.

Ответ 2

Вы можете решить эту проблему, используя flexbox

.container{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tile{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Ответ 3

Это очень распространенный вопрос. Взгляните на эту статью... у нее есть все ответы:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Теперь, здесь быстрая скрипка, чтобы использовать это. Попробуйте щелкнуть по любому из текстовых элементов "Столбец #", чтобы удалить их из документа... столбцы будут значительно изменять размер:)

http://jsfiddle.net/UnsungHero97/qUT3d/9/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}