使用CSS創建兩個相同高度的佈局列，並插入右列

Question

我不能使用表標籤，也不Flexbox的內部三個相等的高度堆疊列。我們的大部分訪問者都是使用IE8的老年人。

我試圖創建一個在左，右浮動兩個相等的高度佈局列。

左列包含兩個不等高的堆疊div。但這些div應該擴大以填充col1的總高度。

右列包含三個堆疊的列，它們應該具有相同的高度。這些div也應該填寫col2的總高度。

在整體中，col1和col2上應始終具有同等的高度。

我不能設置固定的像素大小爲每列作爲進去的內容每天不同即可。我希望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答案是正確的，但你需要浮動，以使它們看起來旁邊的海誓山盟列（包括左）。您還需要爲子項垂直擴展來指定列的高度（以及它們的父元素，假設高度設置爲％）。有了您的標記，以下CSS應該做的伎倆：

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% 
}