使用CSS创建两个相等高度的布局列，并在右列

Question

我不能使用表格标签或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应该可以解决这个问题：

{ 
"languages":[ 

    { 
    "code": "aaa", 
    "lang": "english" 
    }, 
    { 
    "code": "aab", 
    "lang": "Swedish" 
    }, 
  ] 
}

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