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

Question

我不能使用 table 标签和 flexbox。我们的大多数访问者都是使用 IE8 的老年人。

我正在尝试创建两个等高的布局列，它们在左侧和右侧浮动。

左栏包含两个堆叠的 div，高度不等。但是这些 div 应该展开以填充 col1 的总高度。

右栏包含三个堆叠的栏，它们的高度应该相等。这些div也应该填写col2的总高度。

总的来说，col1 和 col2 应该始终具有相同的高度。

我无法为每一列设置固定的 px 大小，因为里面的内容每天都不同。我希望 col1 和 col2 的内容都展开以适应总高度，这样底部就没有剩余的 space。

我的选择是使用显示：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

您可以将 css 中的所有这些百分比用于高度和宽度，它会根据用户的屏幕尺寸进行调整！

这些方法可能并不完美，您可以随时 fiddle 使用数字或尝试其他方法。希望这有帮助

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

Answer 2

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

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

Using CSS to create two equal height layout columns, and inserting three equal height stacked columns inside the right column

html

css

height

layout

equals