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

Question

我正在尝试实现一个内容,我需要有一个100%的浏览器宽度的一部分,在其中我需要在左边的大小一个宽度为200px的div,在它的右边我需要有动态宽度的div取决于浏览器的宽度.示例.. browser = 900px - > left div 200px right 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中做同样的事情:)

谢谢你,丹尼尔!

Answer 1

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

编辑:权利<div>也应该有以下规则:

overflow: hidden;
display: block;

将overflow: hidden使得DIV表现为一列的权利,否则其内容将围绕流动左股利.

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

这里有一个例子(我改变了<section>对<div>用于非HTML5浏览器的缘故,但它的工作原理是相同的).

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

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

​