css - 兄弟の div はコンテナー内の高さに一致します

Question

コンテナーに 3 つの div があります: http://jsfiddle.net/fBe9y/

1 つの div には多くのコンテンツがあります。divコンテンツの少ない他の 2 つの s を、最も長い s の高さと一致させるにはどうすればよいdivですか?

height: 100%すべての に追加しようとしましたが、レンダリング前にわからないondivが必要になるため、機能しません。heightdiv.container

Answer 1

display: table-row;とを使用することをお勧めしdisplay: table-cell;ます。つまり、テーブルレイアウトを作成しますが、<div>タグを使用して、テーブルのように動作するようにスタイルを設定します。

これは、セマンティックとアクセシビリティの理由から、単にテーブルを使用するよりも優れています。

しかし、一般的に言って、CSSは、この方法で要素の兄弟を参照する多くの方法を提供しません。タグは機能します<table>が、スクリーンリーダーなどを混乱させます。

より多くの行が必要な場合は、より多くの行が必要になります。次に、それらすべてをラップ.container <div>する別の行を作成して、それを指定します。<div>display: table;

したがって、同じHTMLを使用して、このCSSは必要な処理を実行します。

.container
{
    display: table-row;
}

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

フィドルを参照してください。

注意：display: table;whileetal。は広くサポートされており、IEはバージョン8までサポートを追加しませんでした。IE7以下でこれをサポートする予定の場合は、@Hristoのようなより複雑なアプローチを使用する必要があります。

Answer 2

フレックスボックスを使用してこれを解決できます

.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;
}

Answer 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;
}​