爲什麼在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高度？

回答

相關問題