我有一个 3 列的布局。我需要将左右 div 的宽度固定为像素,中间的 div 应根据浏览器宽度进行扩展。
引用图片
灰色和红色 div 的宽度以像素为单位固定,因此这两个 div 应该始终位于浏览器的右侧和左侧,绿色 div 不应有任何宽度,因为它应该根据浏览器宽度扩展。
这是我到目前为止尝试过的演示 http://jsfiddle.net/JvHZ7/
最佳答案
您可以使用 CSS 表格。这是一个演示:little link .基本大纲如下所示,HTML:
<div class = "container">
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
<div class = "fluid">
I'm fluid! Glee is awesome!
</div>
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
</div>
CSS:
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
}
.fixed {
width: 150px; /*or whatever you want*/
}
.fluid {
/*yep, nothing*/
}
关于css - 灵活的布局以适应浏览器的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12621519/