二つの等しい高さレイアウト列を作成するためにCSSを使用して、右の列

Question

Iは、テーブルタグもフレキシボックスを使用することができない内部3つの等しい高積層列を挿入します。訪問者のほとんどはIE8を使用している高齢者です。

左右に浮動する2つの等しい高さのレイアウト列を作成しようとしています。

左の列には、同じ高さではない2つの積み重ねられたdivが含まれています。これらのdivは、col1の合計高さを埋めるように拡大する必要があります。

右の列には、高さが同じであるべき3つの積み重ねられた列が含まれています。これらのdivは、col2の合計高さにも入力する必要があります。

全体として、col1とcol2は常に同じ高さにする必要があります。

中に入るコンテンツが毎日異なる可能性があるため、各列に固定のpxサイズを設定することはできません。私は両方のcol1とcol2の内容が全体の高さに収まるように展開して、底に余分なスペースがないようにしたいと思います。

私のオプションは、display：tableを使用することでした。しかし、あなたに良い提案があるなら、私に知らせてください。

（ちょうどあなたの参照のために、画像に示されているすべてのdivに境界線を持っている。）

<div class="container"> 

<div class="left"> 
    <div class="col-1-1"></div> 
    <div class="col-1-2"></div> 
</div> 

<div class="right"> 
    <div class="col-2-1"></div> 
    <div class="col-2-2"></div> 
    <div class="col-2-3"></div> 
</div> 

任意の助けいただければ幸いです。

Answer 1

リチャードSussans答えが正しいことができますが、あなたは彼らがお互いの隣に表示されるようにするために、列（左両方）をフロートする必要があります。また、子が垂直方向に展開するために、高さが％で設定されていると仮定して、列の高さ（親要素と同様に）を指定する必要があります。

html, body, .container { 
    height: 100%; 
} 
.left { 
    float: left; 
    height: 100%; 
    width: 35%; 
} 

.right { 
    float: left; 
    height: 100%; 
    width: 65%; 
} 

.col-1-1 { 
    height: 25%; 
} 

.col-1-2 { 
    height: 75%; 
} 

.col-2-1 { 
    height: 33%; 
} 

.col-2-2 { 
    height: 33%; 
} 

.col-2-3 { 
    height: 34%; 
} 

Answer 2

cssでこれらの割合の高さと幅を使用すると、ユーザーの画面サイズに合わせて調整できます。

これらは完全には機能しないかもしれませんが、数字を使ったり、別の方法で試したりできます。 希望はこれが

.left { 
    height: 100% 
    width: 35% 
} 

.right { 
    height: 100% 
    width: 65% 
} 

.col-1-1 { 
{ 
    height: 25% 
    width: 35% 
} 

.col-1-2 { 
{ 
    height: 75% 
    width: 35% 
} 

.col-2-1 { 
{ 
    height: 33% 
    width: 65% 
} 

.col-2-2 { 
{ 
    height: 33% 
    width: 65% 
} 

.col-2-3 { 
{ 
    height: 34% 
    width: 65% 
}