Question

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？任何解决这个问题的想法/建议都值得称道。

Answer 1

我建议从一开始就将图像放入包装中，然后在各自的条件下将其删除。所有这些都可以通过一点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'});
    }

});

Here is the Fiddle

如何根据儿童div存在将背景图像设置为最外层的div？

1 个答案: