Question

我用边框弄清楚我的包装器只包裹了我的标题，我很难过为什么......我想把标题包起来，一直到页脚...任何人都有任何指针？

我已经看到很多文章说要指定宽度，如果没有说明，高度也设置为自动，对吗？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Personal Transportation/Errands Services</title>
</head>

<body>
<header>
    <div id="headleft">
        <img src="images/new logo flattened.jpg" />
    </div>
    <div id="headright">
        (717)***-****
            <br />
        ********@yahoo.com
    </div>
</header>

    <nav>
        <a href="index.html">Home</a>
        <a href="contact.html">Contact</a>
    </nav>

    <article>
        Test
    </article>

    <aside>
        <img src="images/car 1.png" id="car" />
    </aside>

    <footer>
        Ftest
    </footer>
</body>
</html>

/* Makeshift CSS Reset */
    {
    margin: 0;
    padding: 0;
    }

    /* Tell the browser to render HTML 5 elements as block */
    footer, header, aside, nav, article {
    display: block;
    }

body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}

header {
background-color: #1a8cff;
}

nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}

a {
text-decoration: none;
}

/* unvisited link */
a:link {
color: #FFFFFF;
}

/* visited link */
a:visited {
color: #FFFFFF;
}

/* mouse over link */
a:hover {
color: #FFFF00;
}

/* selected link */
a:active {
color: #FFFF00;
}

#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}

#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}

body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}

article{
float: left;
}

aside{
float: right;
}

footer{
float:left;
background-color: #1a8cff;
width: 100%;
}

Answer 1

您需要清除浮动元素，您可以使用clearfix或空div设置为clear:both。

FIDDLE

您还可以在body中使用包装器，该包装器包装页面上的每个元素并将其设置为overflow: hidden

ALT FIDDLE

HTML5包装器只包装Header（使用边框）

1 个答案: