css - 使用 div 的 2 行和 2 合并行的高度

Question

基本上我想使用 DIV 来实现这一点：

---------------
|one   |       |
|------| three |
|two   |       |
----------------

其中“三”的高度与“一”和“二”的高度匹配。

我的代码：

<div class="detail-main">
    <div class="detail-leftcol">
        <div class="detail-one">
            This is One         
                       </div>
        <div class="detail-two">
            This is Two
        </div>
    </div>
    <div class="detail-three">
        This is Three
    </div>
</div>

CSS：

div.detail-main    {
     position:relative;
     width:500px;
}

div.detail-leftcol
{    
    float:left;    
    width:250px;
}

div.detail-one    {
    border: thin solid;
    margin-bottom:2.5px;
}

div.detail-two    {
    border: thin solid;
    margin-bottom:2.5px;
}

div.detail-three    {
    border: thin solid;
    float:right;
    width:245px;
    margin-left:2.5px;
}

我得到的结果是这样的：

|-----------------|
|One     | Three  |
|------------------
|Two     |
----------

应该将什么更改为“三”以符合“一”和“二”的高度？

帮助会很棒！

Answer 1

你可以这样写：

HTML

<div class="left">
    <div class="one">one</div>
    <div class="two">two</div>
</div>
<div class="three">one</div>

CSS

.left, .three{
    display:table-cell;
    width:100px;
}
.three{background:red;}
.left > div{
    height:100px;
    background:green;
}
.left .two{background:blue}

检查这个http://jsfiddle.net/suNUK/4/

Answer 2

在不更改标记的情况下，您可以像这样使用 jQuery：

var detail1Height = $(".detail-one").outerHeight();
var detail2Height = $(".detail-two").outerHeight();

$(".detail-three").height(detail1Height + detail2Height + 1);

这是一个演示：http: //jsfiddle.net/rniestroj/M4tpx/