Html 为什么在使用宽度时浮动元素不并排对齐？_Html_Css

Html 为什么在使用宽度时浮动元素不并排对齐？

html css

Html 为什么在使用宽度时浮动元素不并排对齐？,html,css,Html,Css,我有下面的代码，但是我不明白为什么div元素rightnav出现在div元素leftnav的下方，如果我对其应用了width属性。我做错了什么，或者我误解了浮动的使用代码 <!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"

我有下面的代码，但是我不明白为什么div元素

rightnav

出现在div元素

leftnav

的下方，如果我对其应用了width属性。我做错了什么，或者我误解了浮动的使用

代码

<!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>

<!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>

输出

将

溢出：隐藏添加到#rightnav
将解决您的问题
可以在这里找到对其工作原理的解释：
在您的第一个示例中，#rightnav不是浮动的，但它停留在右侧，因为它没有一个清除：left规则。请看这里：
在第二个示例中，当您为#rightnav指定宽度时，浏览器对div的大小有明确的规则，因此它将其渲染为块元素。但它不会浮动在#leftnav旁边，因为它缺少float:left规则。请看这里：
所以请记住：
在每个需要放置在另一个div之外的div
中使用float，从而覆盖其块元素外观
如果您希望在重新浮动的div下面有一个div
元素，请确保包含clear:both（左
，右
，或两者都
）
@Travis J-它与javascript有什么关系？谢谢你的解释链接！这还将负责清除#content
@Wex中的浮动-谢谢。这解决了问题，但没有回答我的问题。例如，应用一个没有属性overflow
的宽度是否意味着它不会在浮动到左侧的元素旁边流动？好吧，考虑一下（左）浮动元素放置在容器之前时是如何工作的。容器中的所有内容都被推到浮动元素的右侧，然后推到元素的下方。请注意，在您的代码中，#leftnav
占据了#righnav
的整个宽度。实际上，没有“右侧”来推动#rightnav
，因此它只是被推到浮动下方。请注意您发布的内容与清除#rightnav
时发生的情况之间的差异：另外，请查看将#righnav
的宽度增加到250px
时发生的情况：是的，这也是一个很好的答案。您的解决方案确实需要执行更多的工作；不要忘记用溢出：隐藏清除内容中的浮动