Html 为什么小部门不在大部门？_Html_Css_Header_Nav

Html 为什么小部门不在大部门？

html css

Html 为什么小部门不在大部门？,html,css,header,nav,Html,Css,Header,Nav,Header应该是窗口的全宽，并且在其中投资的diva的总宽度为980像素。但为什么三个小部门不在大部门？有没有可能使代码更简单？谢谢你的回答。jsfiddle.net/7L1kLagf <!doctype html> <html> <head> <meta charset="utf-8"> <link href="style.css" rel="stylesheet"> </head> <body

Header应该是窗口的全宽，并且在其中投资的diva的总宽度为980像素。但为什么三个小部门不在大部门？有没有可能使代码更简单？谢谢你的回答。jsfiddle.net/7L1kLagf

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="center">
            <div class="left">
                <nav class="left-menu">
                    <ul>
                        <li><a href="#one">One</a>
                    </ul>
                </nav>
            </div>
            <div class="logo">
                Pic
            </div>
            <div class="right">
                <nav class="right-menu">
                    <ul>
                        <li><a href="#two">Two</a>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>
    </main>
    <footer>
    </footer>
</body>

在CSS中：
注意

宽度的变化
body{
margin: 0px;
padding: 0px;
}

header{
background-color: black;
}

.center{
width: 100%;
margin: 0 auto;
padding: 16px 0 0 0;
border: 5px;
}

.left{
float: left;
width: 25%;
border: 5px solid black;
}

.logo{
float: left;
width: 44.5%;
border: 5px solid black;
}

.right{
float: left;
width: 25%;
border: 5px solid black;
}

您必须将包含div设置为100%，然后将较小的div设置为占包含div的一定百分比。您应该始终在px
上使用%
，以便屏幕填充保持一致。
发生这种情况是因为您将内部元素设置为浮动。如果元素被设置为浮动，容器将不会“环绕”它们。您可以在容器（标题）上使用display:table
，在内部元素上使用display:table cell
，而不是尝试浮动它们
你能不能编一把小提琴把你的问题形象化。www.jsfiddle.netYes，当然。
body{
margin: 0px;
padding: 0px;
}

header{
background-color: black;
}

.center{
width: 100%;
margin: 0 auto;
padding: 16px 0 0 0;
border: 5px;
}

.left{
float: left;
width: 25%;
border: 5px solid black;
}

.logo{
float: left;
width: 44.5%;
border: 5px solid black;
}

.right{
float: left;
width: 25%;
border: 5px solid black;
}

header{
    background-color: black;
    display: table;
}

.center{
    width: 980px;
    margin: 0 auto;
    padding: 16px 0 0 0;
    border: 5px;
}

.left{
    /*float: left;*/
    width: 325px;
    border: 5px solid black;
    display: table-cell;
}

.logo{
    /*float: left;*/
    width: 300px;
    border: 5px solid black;
    color: #fff;
    display: table-cell;
}

.right{
    /*float: left;*/
    width: 325px;
    border: 5px solid black;
    display: table-cell;
}