Html 无法在水平面上对齐div

我使用WinXP，但这个问题发生在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>

谢谢，-Dave

实现所需布局的一种方法是停止浮动

.productDetailsPanel

，并为其留出

25%

（即

.categoryPanel

的宽度，加上它们之间的间距）。（您还需要删除

.categoryPanel

上的上边距）

但这确实意味着列之间的间距将被定义为

.container

的百分比，而不是固定数量的像素。

实现所需布局的一种方法是停止浮动

.productDetailsPanel

，并给它一个

25%的左边距（即
.categoryPanel
的宽度加上它们之间的间距）。（您还需要删除
.categoryPanel
上的上边距）




但这确实意味着列之间的间距将被定义为
.container
的百分比，而不是固定数量的像素。
为了让它占据整个空间，您需要用一些东西填充它或提供一个宽度。我创建了一个JSFIDLE来显示结果。基本上我修改了
.products添加
宽度：75%；
删除
浮动：右；
并修改
边距：10px 0；

以下是
.productsDetailsPanel

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

为了让它占据整个空间，你需要用一些东西填充它或者提供一个宽度。我创建了一个JSFIDLE来显示结果。本质上，我修改了
.productsDetailsPanel
，添加了
宽度：75%；
删除
浮动：右；
并修改了
边距：10px 0；

以下是
.productsDetailsPanel

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

这可能有效（浮动：左）：

这可能会起作用（浮动：左）：

在
.productDetailsPanel
上，删除
float:right
并添加
overflow:hidden
，任务完成；这正是您要求的


溢出的原因：隐藏在这种情况下帮助不大。
在
上。productDetailsPanel
，删除
浮动：右
并添加
溢出：隐藏
，任务完成；这正是您要求的


溢出的原因：隐藏在这种情况下的帮助并不明显。
在你的小提琴中，红色框跳到绿色框的下方，就像他在窗口宽度缩小时的问题中所说的那样。在你的小提琴中，红色框跳到绿色框的下方，就像他在窗口宽度缩小时的问题中所说的那样。
.productDetailsPanel {
height: 600px;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
float: left;
margin: 10px 10px 0 5px;
}