这个网页在 Dreamweaver 中看起来不错，但是当我在任何浏览器中查看它时，3 列不在 wrapper2 id 中。它甚至没有出现。我不知道为什么。
这是我的 HTML 代码
<body>
<div id="wrapper">
<div id="header">
<div id="menu"></div>
</div>
<div id="wrapper2">
<div id="leftpane"></div>
<div id="bodycontent"></div>
<div id="rightpane"></div>
</div>
<div id="footer"></div>
</div>
</body>
这是CSS
#wrapper {
width: 900px;
background-color: #666;
margin-right: auto;
margin-left: auto;
}
#wrapper #header #menu {
background-color: #00F;
height: 50px;
width: 900px;
position: relative;
top: 150px;
}
#wrapper #header {
background-image: url(../images/index_03.gif);
height: 200px;
width: 900px;
}
#wrapper2 {
position:relative;
width:900px;
background-color:#999;
height:auto;
}
#leftpane {
width:200px;
height:347px;
background-color:#C96;
left:0px;
top:0px;
margin:5px;
float:left;
}
#rightpane {
width:200px;
height:347px;
background-color:#C96;
margin:5px;
float:right;
}
#bodycontent {
width:400px;
margin:5px;
height:347px;
background-color:#C96;
float:left;
}
#footer {
width:900px;
height:80px;
background-color:#0C6;
}
有人可以帮我解决这个问题吗？
最佳答案
从表面上看，您并没有清除 float 的 #wrapper2 元素。尝试像这样清除包装器:
#wrapper2:before, #wrapper2:after {
content:"";
display:table;
zoom:1; /* ie fix */
}
#wrapper2:after {
clear:both;
}
关于css - 我的 div 无法正确对齐。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9150001/