为什么div的高度无法在Chrome中扩展？

Question

我正在尝试在div中显示包含描述的图片，它在所有浏览器中都能正常运行，但在Chrome中，div高度将无法适应其内容高度。

这是我的代码，我希望它可以清楚，问题只出现在chrome中

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中的图像

以下是Chrome中的结果

这是FireFox中的结果，注意div高度如何扩展以填充内部图像

有什么想法吗？

Answer 1

将您的调用更改为JavaScript：

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

Answer 2

这里有一个..但需要付费。

http://themify.me/themes/pinboard