Question

由于某种原因，我的容器不会围绕其他元素包裹边框。现在它只是围绕标题包裹边框。已经使用验证器检查了css和html，但它们没有显示任何错误。现在有人问题是什么？

HTML：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Site Tite in Browser</title>
<link rel="stylesheet" href="style.css" media="screen" />   
</head>
<body>
<div id="container"> <!-- Container Start -->
<div id="header">
<div class="site-title">Site Title</div>
<div class="site-description">a description of the site</div>
</div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div id="content"> <!-- Content Start -->
<h2>Title</h2>
Sample text
</div> <!-- Content End -->
<!-- Sidebar Start -->
<div id="sidebar">Sidebar</div> <!-- Sidebar End -->
<div id="footer">Copyright &copy [sitename]</div> 
</div> <!-- Container End -->
</body>
</html>

这是CSS：

body {
background:#990000;
margin:0;
padding:0;
}

#container {
width:960px;
background:#fff;
padding:10px;
margin:10px auto 10px auto;
border-width:5px;   
border-style:double;
border-color: #000000;
}

/* Header Start */

#header {
background:url(images/header.jpg) top left repeat-x #fff;
width:960px;
height:150px;
margin:0;
padding:0;
}

.site-title {
color:#fff;
margin:0;
padding:10px;
font-weight:normal;
font-size:24pt;
}

.site-description {
text-align:right;
padding:50px 10px 10px 10px;
color:#fff;
font-size:12pt;
font-weight:bold;
}


/* Menu Start */

#menu {
margin:10px 0 0 0;
padding:0 10px 0 10px;
height:37px;
width:940px;
border:1px #000000;
}

#menu li {
list-style:none;
margin:0;
padding:0;
display:inline;
}

#menu li a {
font-weight:bold;
font-size:12pt;
text-decoration:none;
padding:0 10px 4px 10px;
display:block;
margin:0;
line-height:33px;
float:left;
}

#menu li a:hover {
color:#000000;
}



/* Main Content Start */

#content {
margin-top:10px;
width: 500px;
overflow : auto;
float: left;
background: #ffffff;
border: 1px;
}


/* Sidebar Start */
#sidebar {
margin-top: 10px;
width:400px;
height:auto;
float:right;
font-weight:bold;
text-align:center;
padding:5px;
background: #ffffff;
border:10px solid #fff;
}

/* Footer Start */

#footer {
clear:both;
width: 950px;
margin-top: 10px;
float: left;
height: 40px;
border-top:1px solid #000000;
color:#000000;
text-align:center;
font-size:12px;
}

/* Format Start */

a {
color:#990000;
}

Answer 1

浮动内容不会占用DOM中的垂直空间，事实上当你浮动某些东西时，你应该想到它几乎将它从DOM中移除。为了解决这个问题，您应该在容器底部添加一个带有浮动元素的清除。

所以在你的HTML结束时，你应该有这样的东西。

    <div id="sidebar">Sidebar</div> <!-- Sidebar End -->
    <div id="footer">Copyright &copy [sitename]</div> 

    <div style="clear:both;"></div> <!-- Clears the floated content -->

</div> <!-- Container End -->

对于“我认为”更高级和更漂亮的解决方案，您可以查看此链接。 HTML/CSS: Clear floating elements in the middle without adding unneeded tags

网站容器不会包装？

1 个答案: