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

CSS: Auto resize div to fit container width

提问by Maysam

I have two <div>: leftand contents. These two are inside wrapperdiv that has min-width:960px;. lefthas fixed width, but I want to make content flexible with min width of 700pxand if screen is wider, stick it to the right bound of screen.

我有两个<div>：left和content。这两个都在里面包装有格min-width:960px;。left有固定的宽度，但我想让内容灵活，最小宽度为700px，如果屏幕更宽，请将其粘贴到屏幕的右侧边界。

CSS:

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/

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

采纳答案by sandeep

You can overflow:hiddento your #content. Write like this:

您可以overflow:hidden将您的#content. 像这样写：

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

Check this http://jsfiddle.net/Zvt2j/1/

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

回答by Lucas Lazaro

You could use css3 flexible box, it would go like this:

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

First your wrapper is wrapping a lot of things so you need a wrapper just for the 2 horizontal floated boxes:

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

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

And your css3 should be:

你的 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; 
}

回答by Serj Sagan

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

If you need the whitespace on the right of #left, then add a border-right: 10px solid #FFF;to #leftand add 10pxto the padding-leftin #content

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

回答by Morpheus

I have updated your jsfiddleand here is CSS changes you need to do:

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

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

回答by Maysam

CSS auto-fit container between float:left & float:right divssolved my problem, thanks for your comments.

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