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

Question

我有两个 <div>，分别是left和contents。 这两个都在wrapper 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/

- Maysam

---

将div元素通过CSS调整使其填充父容器的宽度 - primetwig

只需在您的#content div中添加float:right;即可 :) - Morpheus

尝试一下：https://dev59.com/sGw15IYBdhLWcg3wCnUn - ATOzTOA

请查看此链接：http://blog.html.it/layoutgala/LayoutGala32.html - Morpheus

Answer 1

您可以对您的 #content 应用 overflow:hidden。写成这样：

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

请查看这个http://jsfiddle.net/Zvt2j/1/

- sandeep

Answer 2

你可以使用CSS3的flexible box，代码如下： 首先，你需要为两个水平浮动框架创建一个包装器，因为你的包装器会包含很多内容：

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

- Lucas Lazaro

---

它非常适用于支持CSS3的浏览器。 - Maysam

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的右侧保留空白，那么就在#left上添加border-right: 10px solid #FFF;，并在#content中将padding-left增加10px即可。

- Serj Sagan

Answer 4

在float:left和float:right divs之间自适应的CSS容器解决了我的问题，感谢您的评论。

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

- Maysam

Answer 5

我已经更新了你的jsfiddle，以下是你需要进行的CSS更改：

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

- Morpheus