CSS：自动调整 div 大小以适应容器宽度答案

【问题标题】：CSS: Auto resize div to fit container widthCSS：自动调整 div 大小以适应容器宽度
【发布时间】：2013-01-14 13:15:08
【问题描述】：

我有两个<div>：left和contents。这两个在具有min-width:960px; 的 wrapper div 中。 left 具有固定宽度，但我想让内容灵活，最小宽度为 700px，如果屏幕较宽，请将其粘贴到屏幕的右边界。
@ 987654325@

CSS：

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle：http://jsfiddle.net/Zvt2j/

【问题讨论】：

重复stackoverflow.com/questions/7051768/…
只需将float:right; 添加到您的#content div :)
试试：stackoverflow.com/questions/6865194/…
看看这个link

标签： css

【解决方案1】：

您可以将overflow:hidden 发送至您的#content。像这样写：

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

查看http://jsfiddle.net/Zvt2j/1/

【讨论】：

【解决方案2】：

你可以使用css3灵活的盒子，它会是这样的：

首先，您的包装器包装了很多东西，因此您需要一个包装器，仅用于 2 个水平浮动框：

 <div id="hor-box"> 
    <div id="left">
        left
      </div>
    <div id="content">
       content
    </div>
</div>

你的 css3 应该是：

#hor-box{   
  display: -webkit-box;
  display: -moz-box;
  display: box;

 -moz-box-orient: horizontal;
 box-orient: horizontal; 
 -webkit-box-orient: horizontal;

}  
#left   {
      width:200px;
      background-color:antiquewhite;
      margin-left:10px;

     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;  
}  
#content   {
      min-width:700px;
      margin-left:10px;
      background-color:AppWorkspace;

     -webkit-box-flex: 1;
     -moz-box-flex: 1;
      box-flex: 1; 
}

【讨论】：

对于支持 CSS3 的浏览器来说非常棒。

【解决方案3】：

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
    position-relative;
}
#left
{
    width:200px;
    position: absolute;
    background-color:antiquewhite;
    margin-left:10px;
    z-index: 2;
}
#content
{
    padding-left:210px;
    width:100%;
    background-color:AppWorkspace;
    position: relative;
    z-index: 1;
}

如果您需要#left 右侧的空格，则将border-right: 10px solid #FFF; 添加到#left 并将10px 添加到padding-left 中的padding-left #content

【讨论】：

【解决方案4】：

CSS auto-fit container between float:left & float:right divs 解决了我的问题，感谢您的 cmets。

#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    overflow:hidden;
    margin-left:10px;
    background-color:AppWorkspace;
}

【讨论】：

【解决方案5】：

我已经更新了你的jsfiddle，下面是你需要做的 CSS 更改：

#content
{
    min-width:700px;
    margin-right: -210px;
    width:100%;
    float:left;
    background-color:AppWorkspace;
}

【讨论】：