有大量的 CSS 列布局信息,但它们似乎都依赖于至少一些具有固定宽度(或百分比)的列,然后其他列可以以此为基础。
我想要实现的是一个三列布局,左右列的宽度可变(它们可以包含任何内容)但分别固定在左侧和右侧。然后中心列应该展开以占据它们之间的任何剩余空间。 IE。如果右栏中没有任何内容,则中间栏会扩展到屏幕右侧。
这里有一个快速商店来演示:
最佳答案
如果你不介意将中心元素放在左右两列之后,你可以这样做:
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
只需 float 侧面元素,对于中间元素只需添加一个溢出(可以是hidden
或scroll
)。
.left {
float: left;
}
.right {
float: right;
}
.center {
overflow: hidden;
}
这是 fiddle :
关于html - 三列可变宽度 CSS 页面布局,中心列展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19686917/