我的 div 无法正确对齐。为什么？答案

【问题标题】：my divs won't align correctly. why?我的 div 无法正确对齐。为什么？
【发布时间】：2012-02-05 14:27:01
【问题描述】：

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

有人可以帮我解决这个问题吗？

【问题讨论】：

你能设置一个演示@jsfiddle.net 吗？
jsfiddle.net/mayRY - 除非我遗漏了什么，否则它看起来还不错。
@PeeHaa I have added it - 问题看起来像 height: auto; 不适用于浮动元素 - 在我的示例中，我将其设置为固定高度，它看起来很好..
大家好，抱歉我的回复晚了。但我不想指定固定高度，因为我希望它随着内容的增长而扩展。 Andres Ilich 的回答如何。谢谢你的帮助:)

标签： css html alignment multiple-columns

【解决方案1】：

从外观上看，您并没有清除浮动的 #wrapper2 元素。尝试像这样清除包装器：

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

#wrapper2:after {
    clear:both;
}

【讨论】：

@guitarlass 很好，如果答案清除了您的问题，请考虑通过使用答案旁边的复选标记来接受它。这样它就可以帮助未来的用户解决同样的问题。
@guitarlass 它的this one 就在这里，来自faq。
@guitarlarlass：如果这对你有用，那么你应该接受这个答案并投票赞成（我给 +1）