css – 我的div将无法正确对齐.为什么？

2019年8月3日 191次阅读

这个网页在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;
}

请有人帮我这个吗？

最佳答案 从它的外观来看,你没有清除浮动的#wrapper2元素.尝试清除包装器,如下所示：

#wrapper2:before, #wrapper2:after {
    content:"";
    display:table;
    zoom:1; /* ie fix */
}

#wrapper2:after {
    clear:both;
}
点赞