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

Question

我有两个

<div>

：左和内容。这两个位于具有 min-width:960px; 的

wrapper

div 内。 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; 
}

Answer 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

 中的 

#content

Answer 4

float:left 和 float:right div 之间的 CSS 自动调整容器解决了我的问题，感谢您的评论。

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

Answer 5

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

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

Answer 6

如果您想要将 div 的宽度设置为其容器块的宽度（如果该 div 不存在），只需使用

width: 100%;

。这里，100% 的意思是“与容器的全宽相同”。

示例：

<div id=container>
  <div id=itemWithWidth></div>
  <div id=itemToGrow></div>
</div

#container {display:inline-block}
#itemWithWidth {width:333px; height:20px; background-color: #00f;}
#itemToGrow {width:100%; height:20px; background-color: #0ff;}

ItemToGrow 是一个与其同级 itemWithWidth 具有相同宽度的条形。