2

我在这样的固定标题中有两个 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 相交。

我想要第二个（右浮动）不要落后于左一个。右 div 应该停止向左移动，并让用户在需要时使用浏览器窗口水平滚动条查看右侧部分。

问题 在此处输入图像描述

4

4 回答 4

2

如果你想要水平滚动条，那么为你的标题设置一个最小宽度

#commit-header_panel
{
    min-width: 1203px
}
于 2013-03-28T13:54:43.377 回答
2

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

例如：

@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;
}
于 2013-03-28T13:54:45.503 回答
1

修复width你的commit-header_paneldiv。

于 2013-03-28T14:07:33.433 回答
0

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

您可能还想将面板宽度设置为 width: auto; 或宽度：X%；因为某些浏览器可能会简单地捕捉到最小宽度而不响应不断变化的窗口大小。 

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

然后一定要清除浮动：

<div style="clear: both;"></div>
于 2013-08-20T17:29:12.107 回答