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