css - 无法设置内部有两个 div 的外部 div 的样式

Question

我有一个 div id event_container 和那个 div id 里面的两个 div 类，类名是 create_event_button 和搜索。我想为事件容器设置特定的背景，然后以不同的方式设置类的样式。

以下是这些元素的 css 样式:-

#event_container{

    background: red;
}

 #event_container .create_event_button {

        margin-left: auto;
        margin-right: auto;
        display: block;
        float: right;
        text-align: center;
        width: 150px;
        color: #1C1C1C;
        background: #A9D0F5;
        font-size: 150%;
        font-weight: bold;
        padding: 1em;
    }
#event_container .search {

    margin-left: auto;
    margin-right: auto;
    display: block;
    float: left;
    width: 480px;
    background: #A9D0F5;
    padding: 1.4em;

}

内部 div 样式工作正常，但 #create_event 没有给我合适的背景颜色。

我一直在尝试解决这个问题，但还没有取得任何成功。如果有人能回答就太好了。

谢谢，

Answer 1

外层 div 只包含两个 float ，允许它们从父 div 中滑出，除非你应用一些 clearfix 技巧(有很多解决方案:http://www.google.com/search?q=clearfix)，或者简单地使用 overflow:hidden; 在父 div 上始终包含任何内部 float :

http://jsfiddle.net/E4J3Q/