我正在尝试实现一个内容区域,其中需要有一个占据浏览器宽度100%的部分,在这个部分里,我需要在左侧放置一个宽度为200px的div,并且在其右侧我需要有一个动态宽度的div,它的宽度取决于浏览器的宽度。
例如,当浏览器宽度为900px时,左侧div宽度为200px,右侧div宽度为700px。
这两个div都具有动态高度,取决于我在它们中间放入多少信息。包裹它们的div将采用这两个div中最大的一个高度。
到目前为止,我已经做了类似于以下的东西
html
现在我需要对 #list 和 #grid div 进行 CSS 样式设置。希望有一种高效的解决方案,因为以后我还需要在 #grid div 中执行相同的操作 :)
提前感谢您,Daniel!
<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;
}
现在我需要对 #list 和 #grid div 进行 CSS 样式设置。希望有一种高效的解决方案,因为以后我还需要在 #grid div 中执行相同的操作 :)
提前感谢您,Daniel!
overflow: hidden
了,请查看我的 jsfiddle,感谢提醒 :) - jackJoe