0

我有 2 个带有容器 div 的 div。我将容器的背景颜色设置为白色，并且没有为其他 2 个 div 设置颜色。由于容器的颜色，期待看到白色背景，但一切都是透明的。正常吗？看起来容器的颜色没有被考虑在内。Tks http://jsfiddle.net/Grek/svt2s/

CSS

#team-container
{
    width:960px;
    background-color:#FFFFFF;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";
    filter: alpha(opacity=83);
    opacity: 0.83; /* For IE8 and earlier */
    margin-left: auto;
    margin-right: auto;
    background: #fff;
}

#team-left {
color:#000;
padding-left:20px;
padding-top:20px;
/* padding:15px;*/
width: 30%; 
float: left;
position: relative; 
}

#team-right { 
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:400;
padding-left:25px;
padding-top:28px;
color:#000;
width: 60%; 
float: left;
position: relative; 
text-align:justify;
}
4

2 回答 2

1

背景颜色和不透明度不是可继承的属性。如果您没有为任何特定元素/选择器定义它，它将不会被设置。

于 2012-08-05T16:39:56.457 回答
0

父元素必须包含其浮动子元素，否则父元素不会占用布局中的任何空间（出于布局目的，它的高度为 0）。这就是为什么你没有看到父母的白色背景。

您可以通过以下两种方式之一来包含浮动的孩子（两者都完成同样的事情）：

清除修复

.clearfix {...}   /* Insert standard clearfix code here */
...
<div id="team-container class="clearfix">
    <div id="team-left"></div>
    <div id="team-right"></div>
</div>

清除 div

.clear {clear:both;}
...
<div id="team-container">
    <div id="team-left"></div>
    <div id="team-right"></div>
    <div class="clear"></div>
</div>

修改后的演示，具有清晰的 div 和浅灰色背景。

使用 clearfix 和浅灰色背景修改的演示。

于 2012-08-05T18:07:00.273 回答