如何在不使用表的情况下复制此3列布局?

Wil*_*ill 5 css layout

对于无法正确解决这个问题感到有点沮丧.我正在更新一个旧网站,并试图在没有表格的情况下完成这项工作.我可以使用box flex来实现它,但它不受很多浏览器的支持.布局是这样的

[col-1-as-small-as-possible] [col-2-should-use-all-space] [col-3-as-small-as-possible]

列不需要具有相同的高度,并且所有3列的总宽度由父级约束.

如果我使用浮动,我无法让中间列扩展.col-1和col-2的宽度不是固定宽度.

任何解决方案都不会比问题(表格)更糟糕?

这是基于表格的解决方案的一个示例:http://jsfiddle.net/7dsCV/1/

Jam*_*gne 3

这是一个奇怪的解决方案,但设置overflow: hidden在中间div会给你我相信你想要的:

http://jsfiddle.net/qrBXL/

我一直想弄清楚为什么会发生这种情况,但还没有抽出时间。我最好的猜测是,这只overflow适用于矩形容器,并且漂浮物包裹在其中,div使其本质上不是矩形。