Question

我有一个像这样的结构

<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>

我的contentWrapper类有这种风格：

.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}

但不显示背景颜色和边框。

我的left_side和right_side类将此作为样式：

.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}

.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}

如果我关闭左侧或右侧的浮球，但背景和边框出现。我如何解决这个问题，我真的需要背景和左右两侧的边框。

谢谢， Ĵ

Answer 1

css中的类名是错误的。在html中，它们被称为left_side和right_side，而在css中你有right_column和left_column。

Fiddle

.contentWrapper {
    margin: 0px auto;
    padding: 0px;
    width: 990px;
    text-align: left;
    background-color: #FFF;
    box-shadow: 0 2px 7px rgba(0,0,0,0.25);
    position: relative;
    z-index: 20;
    overflow: hidden; /* THIS /*
}

这将清除浮动并基本上修复它。当你浮动一个元素时，它跳出普通图层，导致父元素表现为内部没有任何东西。

CSS包装器背景没有出现

1 个答案: