Question

基本上我想用DIV实现这个目的：

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

其中'three'的高度与'one'和'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/

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

2 个答案: