阻止 2 个浮动 DIVS 在另一个浮动 DIVS 内折叠答案

【问题标题】：Stop 2 floating DIVS from collapsing while inside another阻止 2 个浮动 DIVS 在另一个浮动 DIVS 内折叠
【发布时间】：2014-11-05 04:01:59
【问题描述】：

这可能真的很简单，但我就是想不通。

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>

我会用颜色来解释这一点。基本上我希望红色框向左浮动，右框向右浮动在黄色框内。但是，当我使浏览器窗口变小时，一切都崩溃了，黑框在红色下方（在黄色之外）。我知道这听起来很基本，但我不希望它太崩溃，如果它可以保持完整而不移动，并且浏览器只是水平滚动，就像如果窗口变得太小而不能容纳内容，我会很高兴。

谢谢:)

【问题讨论】：

您必须将最小宽度设置为#nav_bar

标签： html css collapse

【解决方案1】：

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

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

DEMO

【讨论】：

【解决方案2】：

只需在容器上添加 width:1000px 或您需要多少。在本例中为“nav_bar”。

Link to JSFiddle

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

【讨论】：