Question

标题应该是窗口的整个宽度，并投入其中，divas的总宽度为980像素。但为什么三个小div不在大div中呢？是否可以使代码更容易？感谢所有的答案。 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>

body{
margin: 0px;
padding: 0px;
}

header{
background-color: black;
}

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

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

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

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

Answer 1

这种情况正在发生，因为您将内部元素设置为浮动。如果元素设置为float，则容器不会“包裹”它们。您可以在容器（标题）上使用display: table，在内部元素上使用display: table-cell，而不是尝试浮动它们。 Demo here

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;
}

Answer 2

在CSS中：
注意对width

的更改

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，以便屏幕填充一致。

为什么小div不在大div中？

2 个答案: