Question

我在容器中有2个容器..我需要设置左容器和右容器的背景颜色，但下面的代码不起作用...

拨弄

http://jsfiddle.net/4uG4j/

HTML

    <div id="container">
       <div id="left-container">
       </div>
       <div id="right-container">
       </div>
    </div>


css


html,body{
    height:100%;
    width:100%;
    margin:2;
}
#container{
   height:75%;
   background-color:yellow
}
#left-container{
   width:23%;
   background-color:red;
   float:left;
   border:1px solid #254117;
}
#right-container{
   width:75%;
   background-color:green;
   float:left;
}

Answer 1

It does work，您没有内容，导致元素的height为零。

Answer 2

您需要在两者上设置height:100%。

<强> CSS

#left-container{
   width:23%;
   background-color:red;
   float:left;
   border:1px solid #254117;
   height:100%;
}
#right-container{
   width:75%;
   background-color:green;
   float:left;
   height:100%;
}

fiddle

我想你想要右边的权利，所以加float:right和width与left-container相同，如下例所示：

<强> CSS

#left-container{
   width:23%;
   background-color:red;
   float:left;
   border:1px solid #254117;
   height:100%;
}
#right-container{
   width: 23%;
    background-color: green;
    float: right;
    height: 100%;
}

fiddle

div的背景颜色div

2 个答案: