Question

我有一个特定的CSS代码。但它没有按预期工作。我想覆盖整个内容的whitewrapper div。但它不起作用。我只是在顶部和底部得到一个div我的内容显示。实际上我的所有内容都应该显示在我的白纸包装内。

<div id ="Wrapper1">
        <div class ="whitewrapper">
                <div class ="content">
                        <div class ="subleft">
                                loremipsum
                        </div>
                        <div class ="subright">
                                loremipsum
                        </div>
                </div>  
        </div>
</div>

#Wrapper1{
    float: left;
    margin: 100px 5px 0 95px;
    min-height: 360px;
    padding: 0 0 5px;
    width: 900px;
    background: none repeat scroll 0 0 #000;
}       
.whitewrapper {
    background: none repeat scroll 0 0 #fff;
    margin: 10px;
    padding: 10px;
}
.subleft {
    float: left;
    max-width: 400px;
    width: 400px;
}
.subright {
    float: right;
    max-width: 300px;
    width: 300px;
}
.content{
        width:880px;
        max-width:880px;
}

错误是什么？

Answer 1

.white_wrapper应为.whitewrapper

Answer 2

.content {
overflow: auto;
}

你应该谷歌一点“css clear float”来理解

Answer 3

这是因为您将内容分区中的所有内容都浮动了。浮动内容在其父级方面不占用任何空间（垂直），因为它基本上从内容中删除。您最好的解决方案是在两个浮动元素之间实际添加内容，或者在内容分区上设置一个高度（不可靠）。

或者，有一个CSS hack，但你必须担心浏览器兼容性：

.whitewrapper:after {
     content: " ";
     display: block;
     clear: both;  
}

See it live.

设置元素样式的更好方法是将内容容器显示为表格，并将其子项显示为表格单元格，假设这些将是布局中仅有的两列：

.subleft {
    display: table-cell;
    max-width: 400px;
    width: 400px;
}
.subright {
    display: table-cell;
    max-width: 300px;
    width: 300px;
}
.content{
    display: table;
    width:880px;
    max-width:880px;
}

See it live.

背景不起作用

3 个答案: