我有以下 HTML 布局
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
我的问题是#container 不包含#left 和#right 内容，它只包含#header
请引用所附图片以了解我的预期布局。
最佳答案
您可以在容器末尾添加一个带有“clear:both”的空元素:
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
<div style="clear:both"> </div>
</div>
</div>
关于HTML – DIV 的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5361451/