4

以下のコードがありますが、widthプロパティを適用した場合にrightnavdiv要素がdiv要素の下に表示される理由について混乱しています。leftnav私は何を間違っているのですか、それともフロートの使用を誤解していますか？

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>DIV example</title>

    <base href="" />

    <link rel="stylesheet" href="" />

    <style type="text/css">

    * {
        margin: 0px;
        padding: 0px;
        font-family: Arial, Verdana, sans-serif;
        font-size: 100%;
    }

    #content {
        width: 700px;
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    #leftnav {
        float: left;
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }

    #rightnav {
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div id="leftnav">left nav</div>
            <div id="rightnav">right nav</div>
        </div>
    </div>
</body>
</html>

出力

ここに画像の説明を入力してください

ここで、プロパティwidthを宣言に適用してコードを次のように修正するrightnavと、要素は下に表示されますleftnav。div要素の幅に関係があるのではないかと思いましたがcontent、両方のdiv要素の組み合わせで十分な幅があります（200px + 200px <700px）。

コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>DIV example</title>

    <base href="" />

    <link rel="stylesheet" href="" />

    <style type="text/css">

    * {
        margin: 0px;
        padding: 0px;
        font-family: Arial, Verdana, sans-serif;
        font-size: 100%;
    }

    #content {
        width: 700px;
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }

    #leftnav {
        float: left;
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }

    #rightnav {
        width: 200px;
        border-width: 1px;
        border-color: #000000;
        border-style: solid;
    }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div id="leftnav">left nav</div>
            <div id="rightnav">right nav</div>
        </div>
    </div>
</body>
</html>

出力

ここに画像の説明を入力してください

4

2 に答える 2

7

最初の例では、 #rightnav はフローティングではありませんが、clear:left;ルールがないため右側にとどまります。ここを参照してください：http://jsfiddle.net/5sHdg/

2 番目の例では、#rightnav の幅を指定すると、ブラウザーには div のサイズに関する明示的なルールがあるため、ブロック要素としてレンダリングされます。しかし、ルールがないため、#leftnav の横には浮かびませんfloat:left;。ここを参照してください：http://jsfiddle.net/Br4Lm/

覚えておいてください：

  1. div別の要素の横に配置する必要があるすべての要素で float を使用して、ブロック要素の外観をオーバーライドします。
  2. divフローティングの div の下に要素があると予想される場合は、必ずclear:both;( left、right、またはboth) を含めてください。
于 2012-06-12T23:32:52.427 に答える
3

に追加overflow: hiddenする#rightnavと、問題が解決します。http://jsfiddle.net/Wexcode/gCVaz/

これが機能する理由の説明はここで見つけることができます：http：//colinaarts.com/articles/the-magic-of-overflow-hidden

于 2012-06-12T23:26:41.213 に答える