使用 CSS 创建两个等高布局列，并在右列内插入三个等高堆叠列

Question

我不能使用表格标签和弹性框。我们的大多数访问者是使用 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%
}