Question

这可能非常简单，但我无法绕过它。

CSS

#nav_bar{
    max-width:1000px;
    height:41px;
    margin: 0 auto;
    background-color:yellow;
}

#left{
    float:left;
    min-width:200px;
    height:41px;
    background-color:red;
}

#right{
    float:right;
    min-width:500px;
    height:41px;
    background-color:black;
}

HTML

<div id="nav_bar">

     <div id="left">
     </div>

     <div id="right">
     </div> 

</div>

我将用颜色解释这一点。基本上我希望红色框向左浮动，右框在黄色框内浮动。然而，当我使浏览器窗口变小时，一切都会崩溃，黑盒子会变成红色（黄色外面）。我知道这听起来非常基本，但我不希望它太崩溃，如果它完全没有移动就可以保持原样并且浏览器只是像往常一样水平滚动，如果窗口变得太小而不是内容。

谢谢：）

Answer 1

您需要为#nav_bar提供足够大的最小宽度以容纳两个子元素：

#nav_bar{
    ...
    min-width: 700px;
}

DEMO

Answer 2

只需在容器上添加宽度：1000px或您需要多少。在这种情况下＆＃34; nav_bar＆＃34;。

Link to JSFiddle

#nav_bar{
   max-width:1000px;
   width:1000px;
   height:41px;
   margin: 0 auto;
   background-color:yellow;
}

停止2浮动DIVS在其他内部崩溃

2 个答案: