为什么在Chrome浏览器中无法展开div高度？

我试图表现出与div的描述图像，它工作在所有浏览器不错，但在Chrome中，div的高度不会适应其内容的高度..为什么在Chrome浏览器中无法展开div高度？

这里是我的代码，我希望它可以明确，这个问题显示出来的铬只

css: 
=========== 
.mainDiv{ 
    position: relative; 
    width: 100%; 
    float: right; 
    top: 10px; 
    min-height: 700px; 
} 

.borde{ 
    width: 200px; 
    position: absolute; 
    float: right; 
    margin: 0px 0px 0 0; 
    text-align: right; 
    background-color: #fff; 
    box-shadow: 0 1px 3px #acb0b2; 
    -moz-box-shadow: 0 1px 2px #acb0b2; 
    -webkit-box-shadow: 0 1px 3px #acb0b2; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#acb0b2')"; 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#acb0b2'); 
    border: solid 1px #d4d1d2; 

} 
=========== 

js: 
=========== 
// this will arrange the divs into the page 
function divPlace(count){ 
    var top   = 0; 
    var right  = 0; 
    var maxWidth = $("#mainDiv").width() -200 ; 
    var level  = 0; 
    var heightArray = new Array(); 
    var counter  = 0; 
    var windowWidth = parseInt(maxWidth/200); 

    for(i=0; i<count; i++){ 
     if(right > maxWidth){ 
      right=0; 
      level=level+1; 
      counter=0; 

     } 

     $("#div_"+i).css("right", right+"px"); 
     right=right+250; 

     if(level==0){ 
      $("#div_"+i).css("top", "0px");   
      $("#div_"+i).css("height", $("#div_"+i).height()); 
      heightArray[counter] = $("#div_"+i).height(); 
     }else{ 
      $("#div_"+i).css("top", 15+heightArray[counter]+"px"); 
      $("#div_"+i).css("height", $("#div_"+i).height()); 
      heightArray[counter] = $("#div_"+i).height()+heightArray[counter]+15; 
     } 

     counter++; 
    } 
} 
=========== 

html 
=========== 
<div class="mainDiv" id="mainDiv"> 

    <div class="borde" id="div_0"> 
     <img src="images/1.jpg" /> 
    </div> 
    <div class="borde" id="div_1"> 
     <img src="images/2.jpg" /> 
    </div> 
    <div class="borde" id="div_2"> 
     <img src="images/3.jpg" /> 
    </div> 
    . 
    . 
    . 
    . 
</div> 
<script type="text/javascript"> 
    $(doucment).ready(function(){ 
     divPlace(22); 
    }); 
</script> 
===========

的问题是，div一定不会自动扩展到包含内部的图像，镀铬

下面是结果在Chrome enter image description here

下面是结果在Firefox中，发现的div高度如何扩大以填充内部图像

enter image description here

任何想法？

来源

2013-02-05 simo

的StackOverflow是不是要问你如何克隆技术没有任何努力的地方。请向我们展示您正在使用的代码并解释_template_的含义。 –

好吧，我会准备一个很好的描述我的，敬请关注:-) – simo

请再次看到问题，因为我已经更新了 – simo

改变您能打电话的JavaScript这样的：

$("#mainDiv img").load(function(){ 
divPlace(22); 
});

来源

2013-02-05 10:33:21

谢谢，它工作！ – simo

这里有一个..需要支付。

http://themify.me/themes/pinboard

来源

2013-02-05 07:41:12

我认为它很容易找到一个自由的..我不想要一个整体主题，我只需要模板，以显示不同高度的图像和它下面的小文本。 – simo

好吧，如果它很容易，我敢肯定，你可以谷歌自己..？ –

我试过了，但是我得到了太多的结果..我认为已经使用过这些的人会有所帮助.. – simo

为什么在Chrome浏览器中无法展开div高度？

回答

相关问题