2015-09-26 75 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"); 
      } 
     });