4

我在下面有以下代码，但是如果我对其应用宽度属性，为什么 div 元素会rightnav出现在 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/

在您的第二个示例中，当您为#rightnav 指定宽度时，浏览器对 div 的大小有一个明确的规则，因此它将其呈现为块元素应该。但它不会在#l​​eftnav 旁边浮动，因为它缺少float:left;规则。见这里：http: //jsfiddle.net/Br4Lm/

所以请记住：

  1. div在每个需要定位的地方都使用浮点数，从而覆盖它的块元素外观。
  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 回答