2015-09-26 76 views
0

我需要自動調整左div的高度,並增加右div高度。如何增加兩個DIV的高度相等?

我的CSS和HTML代碼是在這裏

.left { 
margin:auto; 
float:left; 
width:30%; 
height:auto; 
background:#000; 
} 
.right { 
margin:auto; 
float:left; 
width:70%; 
height:auto; 
background:#eee; 
} 

<div class="left">sgdsfhdh</div> 
<div class="right">Lorem Ipsum is simply dummy text of the printing and  typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
<div style="clear:both"></div> 

回答

1

您可以只用CSS實現這一。您需要使用display:flex;並且需要一個div,它包含您的leftright div/class。

.wrap { 
 
    display:flex; 
 
} 
 
.left { 
 
    width:30%; 
 
    background:#000; 
 
} 
 
.right { 
 
    width:70%; 
 
    background:#eee; 
 
}
<div class="wrap"> 
 
    <div class="left">sgdsfhdh</div> 
 
    <div class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    <div style="clear:both"></div> 
 
</div>

此外,如果你還是想JQuery的方式。

http://jsfiddle.net/52xy3gdr/1/

+0

什麼是第三個div? –

-1
var oldheight=$("#right").height(); 
    $('#right').bind('resize', function(){ 
      if($("#right").height()!=oldheight) 
      { 
      oldheight=$("#right").height(); 
      $('#left').css("height","30px"); 
      } 
     });