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％，或者像我有的像素值然后，您可以将列和行relative放置到父容器中。这允许您将行的高度设置为50％。

这是一个小提琴：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甚至标记，但我只是添加/修改了你现有的小提琴。

Answer 2

在这种情况下使用<table>非常有用..

以下html可以解决问题

<table>
    <tr class='equalRow'>
         <td>row1 col1</td>
         <td rowspan='3'>common col</td>
    </tr>
    <tr class='equalRow'>
         <td>row2 col1</td>
    </tr>
</table>

检查Fiddle for demo

Answer 3

LIVE EXAMPLE

<table>
   <tr><td>A</td><td rowspan="2">C</td></tr>
   <tr><td>B</td></tr>
</table>

table{
  height:300px;
}
table td{
  background:#eee;
  padding:10px;
}
table td:first-child{
  height:50%;
  background:#eee;
  padding:10px;
}

相同长度的列（带有可变行）？

3 个答案: