我正在尝试构建一个在页面中间有三个 float 列的网站。我有一个容器包裹着所有东西，但它不会完全拉伸(stretch)。我做错了什么吗？
谢谢
<!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
{
}
最佳答案
您需要clear你的 float 。这是它的样子。
<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。我现在只在需要使用 javascript 定位某些内容时才使用 id。
<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 因为它不寻常。我很难准确地说出你想用它实现什么。
这是 fiddle一切都在一起。
关于html - CSS 布局不扩展包装器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23517942/