높이가 기본적으로 나는이 사용 DIV를 달성하고자하는 사업부

Question

를 사용하여 행을 병합 :

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

이

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

세 가지로 변경해야합니까

가에있을 :

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

내가지고있어 결과가 이것이다 하나와 둘의 높이가 같은 선은?

도움이 될 것입니다.

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

UR 마크 업이 같은 jQuery를 사용할 수 있습니다

다음

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

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

는 데모입니다 : http://jsfiddle.net/rniestroj/M4tpx/