css - 相同长度的列(可变行)？

Question

我四处搜索，但找不到我要找的东西。我正在尝试做一些相当具体的事情，但我可能只需要指导来应用更通用的解决方案。

我想创建两列，左边一列分成两行，总共有 3 个内部 div。 (也许它们不应该是 div；你会告诉我的。)两列的宽度是预先确定的，但 3 个 div 的高度不是。一张小图:

|---|
|A| |
|-|C|
|B| |
|---|

我希望满足以下条件:

• 高度(A)+高度(B)==高度(C);
• 高度(A)==高度(B)

我创建了一个 jsfiddle，A 是绿色的，B 是黄色的，C 是红色的；整个事情的背景是蓝色的。如果 jsfiddle 能够满足我的要求，蓝色将始终被隐藏: http://jsfiddle.net/266p3/1/

有人可以帮我一下或给我指明正确的方向吗？

Answer 1

您不必为此使用表格。通过将父 #wrapper 定位到 relative 并设置高度(如果您的 html 和 body 可以是 100%设置为 100%，或者我在 fiddle 中设置的像素值)，然后您可以将列和行 relative 定位到父容器。这允许您将行的高度设置为 50%。

这是一个 fiddle :http://jsfiddle.net/266p3/7/

更新后的 CSS:

#wrapper{
    position: relative;
    height: 300px;
}

#col1{
    background-color: blue;
    float: left;
    width: 50%;
    height: 100%;
}

#row1{
    background-color: green;
    height: 50%;
}

#row2{
    position: relative;
    background-color: yellow;
    height: 50%;
}

#col2{
    background-color: red;
    float: left;
    width: 50%;
    height: 100%;
}

可能有更好的方法来组织 CSS 甚至标记，但我只是添加/修改了您现有的 fiddle 。