0

htmlは次のようなものです:-

<div class="mainWrapper">
<div id="left"></div>
<div id="right"></div>
</div>

CSS:-

.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
} 
#left
{
float: left;
padding: 0;
width: 182px;
}   
#right
{
float: left;
padding: 20px;
width: 500px;
}   
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-image: url(/image.jpg);
background-repeat: repeat-y;
background-position: top left;
}

id=leftの div が存在する場合、css クラス「twoColumns」が「mainWrapper」クラスに追加されます。背景画像 (色 #363636) は、最も外側の div に与えられます。css クラス (twoColumns) がドキュメントの準備完了 (#left の有無による) に追加されている場合、サーバーから画像を取得するのに時間がかかっています。子divの存在に応じて、背景画像を最も外側のdivに追加する方法は? この問題を解決するためのアイデア/提案は称賛されます。

4

1 に答える 1

0

最初から画像をラッパーに配置してから、それぞれの条件で削除することをお勧めします。これはすべて、css と JavaScript を少し変更するだけで簡単に実現できます。

CSS:

.mainWrapper
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
    background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
} 
#left
{
float: left;
padding: 0;
width: 182px;
}   
#right
{
float: left;
padding: 20px;
width: 500px;
}   
.twoColumns
{
background-color: #FFF;
overflow: auto;
min-height: 500px;
border: 0px solid black;
overflow: auto;
background-repeat: repeat-y;
background-position: top left;
}​

JS/jQuery:

$(document).ready(function(){
    if($(".mainWrapper #left").length == 0){
        $(".mainWrapper").css({'background-image':'none'});
    }

});​

ここにフィドルがあります

于 2012-11-28T17:40:14.967 に答える