我的 div 无法正确对齐。为什么？
该网页在 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;
}
请有人帮助我吗？
This webpage looks fine in dreamweaver but when I view it in any browser, 3 columns are not inside wrapper2 id. It doesn't even show up. I can't figure out why.
This is my HTML code
<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>
here is 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;
}
Please can someone help me on this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
从表面上看，您并没有清除浮动的
#wrapper2元素。尝试像这样清除包装：From the looks of it you're not clearing your floated
#wrapper2elements. Try clearing the wrapper like so: