CSS:自动调整div大小以适应容器宽度

Question

我有两个<div>:左和内容.这两个是内部包装 div min-width:960px;.left有固定的宽度,但是我希望内容灵活,最小宽度为700px,如果屏幕较宽,请将其粘贴到屏幕的右边界.

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/

Answer 1

你可以overflow:hidden到你的#content.像这样写:

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

检查这个http://jsfiddle.net/Zvt2j/1/

Answer 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; 
}