Jquery 为什么在Chrome中divs高度不能扩展？

我正在尝试用divs显示带有描述的图像，它在所有浏览器中都可以正常工作，但在Chrome中，divs的高度不能适应它的内容高度

这是我的代码，我希望它能清楚，问题只出现在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>
===========

css:
===========
梅因迪夫先生{
位置：相对位置；
宽度：100%；
浮动：对；
顶部：10px；
最小高度：700px；
}
博德先生{
宽度：200px；
位置：绝对位置；
浮动：对；
保证金：0px 0px 0；
文本对齐：右对齐；
背景色：#fff；
盒影：0 1px 3px#acb0b2；
-moz盒阴影：0 1px 2px#acb0b2；
-网络工具包盒阴影：0 1px 3px#acb0b2；
-ms过滤器：“progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#acb0b2'）”；
过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#acb0b2'）；
边框：实心1px#d4d1d2；
}
===========
js:
===========
//这将在页面中排列div
功能分区（计数）{
var-top=0；
var-right=0；
var maxWidth=$（“#mainDiv”）.width（）-200；
风险值水平=0；
var heightArray=新数组（）；
var计数器=0；
var windowWidth=parseInt（maxWidth/200）；
对于（i=0；i最大宽度）{
右=0；
级别=级别+1；
计数器=0；
}
$（“#div_u”+i）.css（“右”，右+“px”）；
右=右+250；
如果（级别==0）{
$（“#div"+i）.css（“top”，“0px”）；
$（“#div_u”+i）.css（“高度”，$（“#div_u”+i.height（））；
heightArray[计数器]=$（“#div_u“+i）.height（）；
}否则{
$（“#div"+i）.css（“顶部”，15+高度数组[计数器]+“px”）；
$（“#div_u”+i）.css（“高度”，$（“#div_u”+i.height（））；
heightArray[counter]=$（“#div"+i）.height（）+heightArray[counter]+15；
}
计数器++；
}
}
===========
html
===========
.
.
.
.
$（doucment）.ready（函数（）{
地方(22);；
});
===========

问题是div不会自动扩展以包含chrome中的图像

这是Chrome的结果

这是FireFox中的结果，请注意divs height是如何扩展以填充内部图像的

---

有什么想法吗？

这里有一个。。但是需要支付

---

这里有一个。。但是需要支付

---

将调用更改为JavaScript，如下所示：

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

---

将调用更改为JavaScript，如下所示：

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

---

我觉得很容易找到一个免费的。。我不想要一个完整的主题，我只需要模板来显示不同高度的图像和下面的小文本..我试过了，但结果太多了。。我想已经用过这个的人会有帮助的..我明白了。如果是这样，我帮不了你。至少没有响应的。演示中有很多裸体图片。。我感到害羞，因为我无法继续寻找它是否适合我我觉得很容易找到一个免费的。。我不想要一个完整的主题，我只需要模板来显示不同高度的图像和下面的小文本..我试过了，但结果太多了。。我想已经用过这个的人会有帮助的..我明白了。如果是这样，我帮不了你。至少没有响应的。演示中有很多裸体图片。。我感到害羞，因为我无法继续寻找它是否适合我。StackOverflow不是问你如何不费吹灰之力就能克隆技术的地方。请向我们展示你正在使用的代码，并解释你所说的模板是什么意思。好的，我会准备一份关于我所拥有的内容的详细描述，请继续关注：-）请再次查看问题，因为我已经更新了它，这里不是问你如何可以毫不费力地克隆一项技术的地方。请向我们展示您正在使用的代码，并解释您所说的模板是什么意思。好的，我将准备一份关于我所拥有的内容的详细说明，请继续关注：-）请再次查看问题，因为我已经更新了它