html - 使用 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

小提琴

Answer 2

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

读这个

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;
}

演示

Answer 3

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