使用CSS創建兩個等高的布局列，並在右列內插入三個等高的堆疊列

Question

我不能使用table標簽或flexbox。 我們的大多數訪問者都是使用IE8的老年人。

我正在嘗試創建左右浮動的兩個等高布局列。

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

右列包含應具有相同高度的三個堆疊列。 這些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

理查德·蘇珊（Richard 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%
}