Question

我在使用Win XP但Firefox，IE和Google Chrome上出现此问题。我想在同一水平面上对齐两个DIV。我希望左边的div占据屏幕的24％，而右边的div占据其余部分。当我的浏览器最大化时，一切看起来都很好，但是当我单击调整大小按钮使窗口变小时，两个DIV不再在同一平面上。右侧DIV的顶部显示在左侧DIV的下边缘下方（右侧DIV的左侧边界仍然在左侧div的右边界之后正确对齐）。

即使窗口未最大化，如何让两个DIV出现在同一水平面上？这是我正在使用的HTML ...

<div class="header">
    <img src="logo.gif"/>
</div>

<div class="container">
    <div id="contents">
        <div class="categoryPanel"></div>
        <div class="productDetailsPanel"></div>     
    </div>
</div>

这是CSS ......

.header {
width: 100%;
height: 63px;
background-color: #333366;
}

.container {
width: 100%;
}

.categoryPanel {
height: 600px;
width: 24%;
float: left;
margin: 10px 5px 0px 0px;
background-color: green;
}

.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: right;
margin: 10px 10px 0 5px;
}

谢谢， - 戴夫

Answer 1

种类实现所需布局的一种方法是停止浮动.productDetailsPanel，并给它左边距25%（即{{1}的宽度加上它们之间的间距）。（您还需要删除.categoryPanel上的上边距。）

http://jsfiddle.net/uSbAs/

但这确实意味着您的列之间的间距将定义为.categoryPanel的百分比，而不是固定数量的像素。

Answer 2

为了占据整个空间，您需要用某种东西填充或提供宽度。我创建了一个jsfiddle来显示结果。基本上我通过添加.productsDetailsPanel删除width: 75%;并修改float:right;

来修改margin: 10px 0 0 0;

以下是.productsDetailsPanel

的新css

.productDetailsPanel {
height: 600px;
width: 75%;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 0px 0 0px;
float: left;
background-color: red;
}

http://jsfiddle.net/rhoenig/qXvag/

Answer 3

在.productDetailsPanel上，删除float: right并添加overflow: hidden，完成工作;这正是你要求的。

http://jsfiddle.net/thirtydot/KjZ8Q/

在这种情况下overflow: hidden有帮助的原因并不明显，read this。

Answer 4

这可行（浮动：左）：

.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: left;
margin: 10px 10px 0 5px;
}

无法在水平面上对齐DIV

4 个答案: