0

我希望右侧的 div 与左侧的 div 的高度相匹配。右侧的 div 应始终与左侧的 div 高度相同。左侧的 div 会自动调整其高度。两个 div 应始终具有相同的高度。一张图片值一千个字，所以请看下面的图片。

这是解释我的问题的图像。

http://i44.tinypic.com/24pcpwj.jpg

JSFIDDLE

http://jsfiddle.net/zFqNH/

HTML

 <div style="width:1053px;">
 <section id="inside" style="overflow: hidden; width:310px; float:right; border-left:0;"> 
 <ul>
 <p class="title">Funny</p>

<li class="list">
    <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg"      width="100" height="67" style="float:left;padding-right:15px;" /></a>
    <h3 style="font-size:20px;">Grumpy Cat</h3>        
</li>
 </ul>
 </section>

 <section id="inside">   
 <h2 class="subheading">Grumpy Cat<br/><p style="font-size:14px; margin-top:0px; font-weight:normal;"></p></h2><h2 style="border-bottom: 1px solid #dddddd; padding-top:10px;"></h2>                                    
 <p class="section"></p>                              

 <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
 <br/>                                      
     <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
 <br/>
         <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
 <br/>

 </div></div></section>

CSS

  #inside { 
width:700px; 
border-right: 1px solid #dddddd; 
border-left: 1px solid #dddddd; 
min-height: 600px; 
overflow: hidden; 
padding-bottom:15px;    
  }
  .title{
width:300px;
padding-top:3px;
padding-bottom:7px;
color:#fff;
height:20px;    
margin-top:125px; 
background:#2c2c2c;         
font-size: 18px;
  }
  .section{
padding-left:30px; 
padding-bottom:15px; 
margin-bottom: 1px; 
font-size: 28px;
color: #657B83;
  }
  .subheading {
background:#fff;    
font-size:50px;         
height:100px;
position: relative; 
  }

  .bottom {
border-top: 1px solid #dddddd;    
border-right: 1px solid #dddddd;    
padding-top: 20px;
text-align: center;
padding-bottom: 10px;   
width:1053px;       
position:relative;
margin: 0 auto; 
font-size:15px;
color: #fff;    
  }
  .list{
width:300px; 
border-bottom: 1px solid #dddddd;
padding-bottom:10px; 
display: inline-block; 
margin-top:20px;
  }
4

1 回答 1

1

在两个 div 下方插入 JavaScript 并使用 document.getElementById 获取左侧 div 的高度，然后使用 document.getElementById 更改右侧 div 的高度。

<script>
  var height = document.getElementById('div1').style.height;
  document.getElementById('div2').style.height = height;
</script>

文档：
http ://www.w3schools.com/jsref/prop_style_height.asp

于 2013-11-01T09:35:56.707 回答