使用div对元素进行分组并为该组应用样式表

Question

我正在尝试创建几个部门并为每个部门应用不同的背景但我的代码没有按预期工作。

HTML

<div class="main">
    <div id="div1">Im in div-1</div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS

.main{
    background-color:red;
}
#div1 {
    height:200px;
    width:100px;
    float:left
}
#div2 {
    height:200px;
    width:500px;
    float:left
}

当我为每个id设置背景颜色时，它按预期工作，但是当我为该类设置它时，它不起作用。

Answer 1

它有效，你看不到它，因为你的浮动div没有被父级包裹。

将overflow:hidden添加到父div

Fiddle

Answer 2

这里你可以通过使用浮动除法（div）清除而不使用结构标记来实现这一点。它在解决布局问题和浏览器不一致方面非常有效，而无需将结构与表示混合。

阅读本文

http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

http://css-tricks.com/snippets/css/clear-fix/

试试这个 -

<div class="main clearfix">
    <div id="div1">Im in div-1</div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

在CSS中 - 添加此内容

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

DEMO

Answer 3

您需要将overflow:hidden;添加到父div，因此它应如下所示： .main{ overflow: hidden; background-color:red; }