Question

我想要像this, click here这样的东西。

这是我的HTML中的一个简单代码：

  #mainContent {
        margin:0;
        width:100%;
        height:600px;
        padding: 0 0 30px 0;
    }
    #mainContent #sidebar { /* sidebar inside #mainContent */
        float:left;
        width:220px;
        height:560px;
        margin:10px 10px 40px 10px;
        padding:10px 5px 10px 5px;
        background-color:#CCCCCC;
    }
    #mainContent #featContent {
        height:560px;
        margin:10px 10px 40px 260px;
        padding:10px 5px 10px 5px;
        background-color:#CCCCCC;
        overflow:auto;
    }

 <div id="mainContent">
    <div id="sidebar"></div>
    <div id="featContent"></div>
</div>

问题是其中一个div被放置不正确。＃featContent div出了它的父#mainContent div，原因我不明白。在jsFiddle here中查看此内容。 #featContent的边距超出了#mainContent界限。

Answer 1

<强> Demo 将以下样式添加到#mainContent

#mainContent {
  overflow:hidden;
}

<强> Live demo

Answer 2

将填充添加到父div

#mainContent {
    margin:0;
    width:100%;
    height:auto;
    padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
    float:left;
    width:220px;
    height:560px;
    margin:10px 10px 40px 10px;
    background-color:#CCCCCC;
}
#mainContent #featContent {
    height:560px;  
    margin:10px 10px 40px 260px;
    background-color:#CCCCCC;
    overflow:auto;
}

演示hrer http://jsfiddle.net/j4C7T/

儿童div扩展出父母div问题

2 个答案: