18

幅 100% の bodyMain div があります。その中には、自動マージン付きの body div 800px があります (「body」を ID として使用できますか?)。この内部には、それぞれ幅 200px と 600px の bodyLeft と bodyRight の 2 つの div があります。内側の div にコンテンツを追加すると、 bodyMain も body も height で拡張されません。高さはすべて自動です。

コードは次のとおりです。http://jsfiddle.net/TqxHq/18/

HTML:

<body>
    <div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here
        </div>
      </div>
    </div>
</body>

CSS:

#bodyMain{
    border:1px solid red;
    width:100%;
    height:auto;

}
#body{
    border:1px solid green;
    width:804px;
    height:auto;
    margin:auto;
}
#bodyLeft{
     border:1px solid blue;
    float:left;
    width:200PX;
    height:auto;
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600PX;
    height:auto;
}
4

5 に答える 5

8

これは、フロートを操作する際によくある問題です。一般的な解決策がいくつかあります。

  1. float の後に clear: both で div を追加します。

  2. CSS 属性を持つコンテナーに 2 つのフロートを追加します。overflow: auto

  3. 親要素を float にする

  4. CSS で :after CSS 疑似要素を使用する:.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

  5. 親要素に設定された高さを追加する

この記事を見る

于 2012-04-14T15:55:55.170 に答える
3

簡単な解決策は、外側の div オーバーフロー:非表示 (スタイル属性内) を使用することです。

ありがとうございました

于 2016-07-05T07:28:57.030 に答える
2

jsFiddleデモ

*{
    margin:0;
    padding:0;
}

#bodyMain{
    position:relative;
    overflow:hidden; /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body{
    display:table;/*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto; /*improved*/
}
#bodyLeft{
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}
于 2012-04-14T16:04:54.173 に答える
2

定義済みのタグ名との混同を避けるため、、、、またはを ID 属性値として使用しないbodyでください。htmlhead

私はムハンマド・イルファンの考えに賛成です。しかし、私は彼の方法に同意しません。小さなスニペットを除き、インライン スタイルは避けてください。特にこの場合は、別のケースが必要になる可能性が高いためclear: bothです。したがって、div を追加し、意味のあるクラス名を付けて、追加の CSS を適用します。

例については、このフィドルを参照してください。

于 2012-04-14T16:00:13.723 に答える