故障排除水平面上的DIV

我在Win XP上，但在Firefox，IE和Google Chrome上出現此問題。我想在同一個水平面上對齊兩個DIV。我想要左邊的div佔據屏幕的24％，右邊的div佔據其餘部分。當我的瀏覽器最大化時，一切看起來都很好，但是當我點擊調整大小按鈕使窗口變小時，兩個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; 
}

謝謝 - 戴夫

來源

2012-01-25 Dave

On .productDetailsPanel，刪除float: right並添加overflow: hidden，完成任務;這正是你要求的。

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

原因overflow: hidden有助於在這種情況下並不明顯，read this。

來源

2012-01-25 16:57:40 thirtydot

當然可以。謝謝， - – Dave

一種方法種實現你想要的佈局是停止浮動.productDetailsPanel，並給它一個25%（即寬度.categoryPanel，加上它們之間的間距）的左邊距。（你還需要去除.categoryPanel上邊距。）

http://jsfiddle.net/uSbAs/

但這意味着你的列之間的間距將被定義爲.container的百分比，而不是固定數量的像素。

來源

2012-01-25 16:45:22

爲了佔據整個空間，您需要填充一些東西或提供寬度。我創建了一個jsfiddle來顯示結果。基本上我加入了width: 75%;去除float:right;和修改margin: 10px 0 0 0;

這裏修改的.productsDetailsPanel是.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; 
}

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

來源

2012-01-25 16:45:44 Robert

在你的小提琴中，紅框跳到綠色的下方，就像他在問題中所說的當窗戶的寬度縮小時一樣。 – j08691

這可能是工作（浮動：左起）：新的CSS

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

來源

2012-01-25 16:55:55 xphantom

故障排除水平面上的DIV

回答

相關問題