右浮動的div進入後面左側的div沒有浮動當窗口寬度小於正常

Question

我在這樣

HTML

<div id="commit-header_panel"> 
    <div id="commit-header_panel_right" style="float:right;backg..."></div> 
    <div id="commit-header_panel_left"></div> 
    <div style="clear:both;"></div> 
</div> 

CSS

固定報頭兩個div

#commit-header_panel 
{ 
    background-color: #c5e8fc; 
    height:74px; 
} 
#commit-header_panel_left 
{ 
    height:74px; 
    min-width: 630px; 
} 

#commit-header_panel_right 
{ 
    min-width: 573px; 
    width:expression(document.body.clientWidth < 573? "573px": "auto"); 
    height:74px; 
} 

問題是，當我調整窗口的寬度時，右側的div與左側的div相交。

我想要第二個（右邊的浮動）不要落後於左邊的一個。如果需要，右側div應停止向左移動，並讓用戶使用瀏覽器窗口水平滾動條查看右側部分。

問題

Answer 1

您可以使用媒體查詢來定義你的CSS：

• Media Queries

例如：

@media all and (max-width: <SET WIDTH HERE>) and (min-width: <SET WIDTH HERE>) { 
    //Define CSS here for screen size 
} 

或者你可以更改你對你的<div>使用百分比定義width的方式。

這樣的：

#commit-header_panel_left 
{ 
    height:74px; 
    min-width: 30%; //replace with required value 
} 

#commit-header_panel_right 
{ 
    min-width: 30%; //replace with required value 
    width:expression(document.body.clientWidth < 573? "573px": "auto"); 
    height:74px; 
} 

Answer 2

如果你想水平滾動條，然後設定一個最小寬度爲你的頭

#commit-header_panel 
{ 
    min-width: 1203px 
} 

Answer 3

解決您的commit-header_panel div的width。

Answer 4

最簡單的方法是找到面板開始重疊的寬度，然後設置最小寬度：Xpx;到父容器。這允許面板動態響應窗口大小調整，但會創建一個停止點，面板不再移動。

您可能還想將面板寬度設置爲寬度：auto;或寬度：X％;因爲一些瀏覽器可能會簡單地捕捉到最小寬度並且不響應變化的窗口大小。

#commit-header_panel { 
background-color: #c5e8fc; 
height:74px; 
width: 100%; 
min-width: 900px; 
} 

然後一定要清除浮球：

<div style="clear: both;"></div>