親オブジェクトのすべての浮動小数点子を最も高い子と同じ高さにする

Question

これは私が持っているものです。それは問題なく動作しますが、まさに私が望む動作ではありません。

#container { 
 
    height:250px; /*I want this to be set to auto*/ 
 
}    /*and have each child the height as the tallest.*/ 
 
#container > * { 
 
    height:inherit; 
 
    border-right: rgb(82,82,82) 2px solid; 
 
    float:left; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.div1,.div2 { 
 
    width: 8.66666% 
 
} 
 
.nav, .div3 { 
 
    width: 41.66666% 
 
}

<div id="container" class="clearfix"> 
 
    <div class="div1"></div> 
 
    <nav class="nav"></nav> 
 
    <div class="div2"></div>  
 
    <div class="div3"></div> 
 
</div>

私は、コンテナの高さを設定するが、私は行くと高さが同じではありません自動または100％に設定している場合、これは大丈夫動作します。私が行くと絶対的な位置を混乱させると、すべてが崩壊するようです。どちらが理解できる。私はフロートや可変幅に基づいて設計しています。誰にも何か提案があるのですか？

Answer 1

フレキシボックス

最新のもの（8/16）が、サポートはIE10 +（かろうじて）であり、ほとんどのサファリの実装（およびFF /クロームの一部の古いバージョンでは）ベンダープレフィックスが必要です。

.container { 
 
    display: flex; 
 
} 
 
.container > * { 
 
    border-right: rgb(82, 82, 82) 2px solid; 
 
} 
 
.div1, 
 
.div2 { 
 
    width: 8.66666%; 
 
    background: pink; 
 
} 
 
.nav, 
 
.div3 { 
 
    width: 41.66666%; 
 
    background: orange; 
 
} 
 
nav { 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="div1"></div> 
 
    <nav class="nav"></nav> 
 
    <div class="div2"></div> 
 
    <div class="div3"></div> 
 
</div>

CSSテーブル

IE8サポートを有するが、より大きな/より小さなデバイスのレイアウトを調整したいときフレキシブルわずかに小さいです。

.container { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.container > * { 
 
    display: table-cell; 
 
    border-right: rgb(82, 82, 82) 2px solid; 
 
} 
 
.div1, 
 
.div2 { 
 
    width: 8.66666%; 
 
    background: pink; 
 
} 
 
.nav, 
 
.div3 { 
 
    width: 41.66666%; 
 
    background: orange; 
 
} 
 
nav { 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="div1"></div> 
 
    <nav class="nav"></nav> 
 
    <div class="div2"></div> 
 
    <div class="div3"></div> 
 
</div>