当窗口宽度小于正常值时，右浮点div在左侧div后面没有浮动

Question

我在这样的固定标题中有两个div

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

#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应该停止向左移动，如果需要，让用户使用浏览器窗口水平滚动条查看右边部分。

问题

Answer 1

如果您想要水平滚动条，请设置标题的最小宽度

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

Answer 2

您可以使用媒体查询来定义CSS：

• Media Queries

例如：

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

或者，您可以更改width上<div>定义使用百分比的方式。

喜欢这个：

#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 3

修复width div的commit-header_panel。

Answer 4

最简单的方法是找到面板开始重叠的宽度，然后设置最小宽度：Xpx;到父容器。这允许面板动态响应窗口调整大小，但创建一个停止点，面板将不再移动。

您可能还想将面板宽度设置为宽度：auto;或宽度：X％;因为某些浏览器可能只是捕捉到最小宽度而不响应更改的窗口大小。

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

然后一定要用以下方法清除浮动：

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