1

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での結果です ここに画像の説明を入力

これが FireFox での結果です。div の高さが拡張されて内側の画像を埋めていることに注目してください。

ここに画像の説明を入力

何か案が？

4

2 に答える 2

1

次のように呼び出しを JavaScript に変更します。

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

ここに 1 つがあります..ただし、支払う必要があります。

http://themify.me/themes/pinboard

于 2013-02-05T07:41:12.007 に答える