1

我正在尝试在 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 高度如何扩展以填充内部图像

在此处输入图像描述

任何的想法？

4

2 回答 2

1

像这样改变你对 JavaScript 的调用：

$("#mainDiv img").load(function(){
 divPlace(22);
});
于 2013-02-05T10:33:21.927 回答
0

这是一个..需要支付。

http://themify.me/themes/pinboard

于 2013-02-05T07:41:12.007 回答