html - 三列可变宽度 CSS 页面布局,中心列展开

标签 html css layout

有大量的 CSS 列布局信息,但它们似乎都依赖于至少一些具有固定宽度(或百分比)的列,然后其他列可以以此为基础。

我想要实现的是一个三列布局,左右列的宽度可变(它们可以包含任何内容)但分别固定在左侧和右侧。然后中心列应该展开以占据它们之间的任何剩余空间。 IE。如果右栏中没有任何内容,则中间栏会扩展到屏幕右侧。

这里有一个快速商店来演示:

Three-column example

最佳答案

如果你不介意将中心元素放在左右两列之后,你可以这样做:

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

只需 float 侧面元素,对于中间元素只需添加一个溢出(可以是hiddenscroll)。

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  overflow: hidden;
}

这是 fiddle :

jsFiddle

关于html - 三列可变宽度 CSS 页面布局,中心列展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19686917/

相关文章:

layout - Bootstrap 4.0 网格系统布局不起作用

javascript - 如何调整字体大小以尽可能适应文本区域的宽度和高度?

HTML 和 CSS3 : How to make elements stay still

css - 样式不适用于 HTML 中的 <hr> 元素

css - IE7 输入定位错误(粘!)

css - div 布局(浮在其他元素上)

html - 使用 <section> 和 <div> block 的 Markdown 范围?

javascript - 如果返回数据为空则提醒ajax成功

html - 页脚最后一页只有 html + css

javascript - 占位符文本在 Safari 中未垂直居中