CSS布局没有扩展包装器

我试图建立一个网站，在页面中间有三个浮动栏。我有一个容器包裹一切，但它不会完全延伸。我做错了什么吗?

感谢

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
       <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
     <div id="container">
         <div id="header">
             <div id="navbar"></div>
         </div>
         <div id="topper">This is the Topper</div>
         <div id="colone">This is column one</div>
         <div id="coltwo">This is column two</div>
         <div id="colthree">This is colum three</div>
         <div id="footer">This is the footer</div>
     </div>
 </body>
 </html>
 @charset "utf-8";
/* CSS Document */
#container
{
    background-color:#CCC;
    min-height:100%;
}
#header
{
    background-color: #000;
    width:100%;
    float:left;
}
#navbar
{
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper
{
    background-color:#000;
    height: 175px;
}
#colone
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree
{
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}
#footer
{
}

你需要清除你的浮动。这就是它的样子。

http://jsfiddle.net/ZT59d/

<div id="container">
    <div id="header">
        <div id="navbar"></div>
    </div>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
    <div id="footer">This is the footer</div>
</div>
#container {
    background-color:#CCC;
    min-height:100%;
}
#header {
    background-color: #000;
    width:100%;
    float:left;
}
#navbar {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
#colone {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree {
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}
.clear
{
    clear:both;
}
#footer {
}

如果你不介意的话，我将给你一些关于如何改进你的代码的建议。

首先，你正在使用HTML5，但你没有使用一些新的元素。让我们把它们替换掉。

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

你也在为所有东西使用id。相信我，你不会想这么做的。实际上，您应该谨慎地使用id。我现在在这一点上，我使用id的唯一时间是如果我需要与javascript的目标。

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div class="column">This is column one</div>
    <div class="column">This is column two</div>
    <div class="column">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

这是你的新css的样子。

body {
    background-color:#CCC;
    min-height:100%;
}
header {
    background-color: #000;
    width:100%;
    float:left;
}
nav {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
.column {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
.clear {
    clear:both;
}

我留下#topper是因为它不寻常。我很难确切地说出你想用它达到什么目的。

把所有的东西放在一起。

解决这个问题的简单方法是添加这样的CSS规则:

#footer
{
    clear: both;
}
#container {
    overflow: hidden;
}

演示

显然，您在理解float属性如何工作方面存在一些问题。你应该更仔细地调查一下。我特别推荐查看clearfix hack

相关内容

最新更新

热门标签：