无法在水平面上对齐 DIV答案

【问题标题】：Trouble aligning DIVs on horizontal plane无法在水平面上对齐 DIV
【发布时间】：2012-01-26 00:57:40
【问题描述】：

我使用的是 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;
}

谢谢，- 戴夫

【问题讨论】：

标签： html css

【解决方案1】：

某种实现你想要的布局的一种方法是停止浮动.productDetailsPanel，并给它一个左边距25%（即.categoryPanel的宽度，加上间距他们）。（您还需要删除 .categoryPanel 的上边距。）

http://jsfiddle.net/uSbAs/

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

这是.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/

【讨论】：

在你的小提琴中，当窗口宽度缩小时，红色框跳到绿色框下方，就像他在问题中所说的那样。

【解决方案4】：

这可以工作（浮动：左）：

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

【讨论】：