1

基本的に私はDIVを使用してこれを達成したいと思います：

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

ここで、「3」の高さは「1」および「2」の高さと一致します。

私が持っているコード：

<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     |
----------

1と2を合わせた高さに合わせるには、何を3に変更する必要がありますか？

ヘルプは素晴らしいでしょう！

4

2 に答える 2

2

次のように書くことができます：

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/

于 2012-06-08T08:03:35.880 に答える
1

マークアップを変更せずに、次のように jQuery を使用できます。

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

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

ここにデモがあります：http://jsfiddle.net/rniestroj/M4tpx/

于 2012-06-08T08:12:42.720 に答える