1

私はこのコードを持っています：

#container {
    position:relative;
    width:760px;    

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    border: 1px solid #cdcdcd;  
}

#sidebar {
    float:left;
    width: 200px;
    background:red;
}

#wrapper {
    float:left;
    width:460px;
background:blue;

}

そしてこのHTMLコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>          
        </div>  
    </body>
</html>

コンテナに高さがないことがわかります....設定する必要がありますか？内側のDIVの高さに応じた高さを説明したいのですが、どうすればいいですか？

4

3 に答える 3

4

高さを設定する必要はありません。追加するだけです。

<div style="clear: both;"></div>

フロートするdivのすぐ下。

あなたの場合、あなたはこれを行うことができます：

これをCSSファイルに追加するだけです。

.clear {
  clear: both;
}

そして、一致するようにHTMLファイルを更新します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>    
            <div class="clear"></div>      
        </div>  
    </body>
</html>
于 2012-05-03T16:21:56.940 に答える
1

これは、を使用したために発生しますfloat:left。clear:both1つの解決策は、次のようにdivを追加することです。

CSS：

.clear {
    clear: both;
}

HTML：

<div id="container">
    <div id="sidebar">LEFT</div>
    <div id="wrapper">RIGHT</div>
    <div class="clear"></div>
</div>
于 2012-05-03T16:23:26.843 に答える
0

コンテナに追加のCSSを与える

overflow: hidden;

これにより、余分なマークアップなしでフロートが壊れ
ます（内部のボックスシャドウでは機能しません）

于 2012-05-03T16:37:22.047 に答える