css – 两列,左边有固定宽度,右边有动态宽度

我正在尝试实现一个内容,我需要有一个100％的浏览器宽度的一部分,其中我需要在左边的大小一个宽度为200px的div,在它的右边我需要一个动态宽度的div取决于浏览器的宽度.
示例.. browser = 900px – >左div 200px右div 700px.
并且两个div都具有动态高度,具体取决于我放入多少信息..包装div将占用这2个div高度中最大的…

到目前为止,我做了类似的事情
HTML

<section id="wrapper">
  <div id="list">
  </div>
  <div id="grid">
  </div>
</section>

CSS

#wrapper {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

现在我需要css #list和#grid divs.我希望有一个有效的解决方案,因为稍后我会在#grid div内做同样的事情:)

谢谢你,丹尼尔！

解决方法

你可以用CSS做到这一点.诀窍是使用float(左div)和非浮动div(右div).左(浮动)div也需要具有最小高度,否则如果左边没有任何内容,则右(非浮动)div将占据左列的空间.

编辑：右边< div>还应该有以下规则：

overflow: hidden;
display: block;

overflow：hidden使得右div表现为列,否则其内容将围绕左div流动.

请注意,#wrapper不需要宽度,因为< div>的默认宽度.是100％(因为你说它将占用浏览器窗口的整个宽度),并且还删除了它的边距.

这是一个示例(为了非HTML5浏览器,我将< section>更改为< div>但它的工作方式相同).

我放置背景颜色来区分所有元素.

http://jsfiddle.net/pmv3s/1/

这是全屏版本：http://fiddle.jshell.net/pmv3s/1/show/light/

CSS：

#wrapper {
    padding: 40px 0;
    overflow: hidden;
    background-color: red;
    min-height: 5px;
}
#list {
    float: left;
    width: 200px;
    background-color: green;
    overflow: hidden;
    min-height: 100px;
}
#grid {
    display: block;
    float: none;
    background-color: blue;  
    min-height: 100px;
    overflow: hidden;    
}

原文地址：https://www.jb51.cc/css/215432.html