6

私はこのようなものが欲しい、ここをクリックしてください。

これは私の 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 の 1 つが不適切に配置されていることです。理解できない理由で、#featContent div がその親の #mainContent div から外れています。こちらの jsFiddle でこれを確認してください。#featContent のマージンが #mainContent の範囲を超えています。

4

2 に答える 2

6

デモ 次のスタイルを#mainContent

#mainContent {
  overflow:hidden;
}

ライブデモ

于 2012-10-04T06:42:21.197 に答える
0

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

デモ担当者http://jsfiddle.net/j4C7T/

于 2012-10-04T06:41:38.707 に答える