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

Question

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

  

[col-1-as-less-as-possible] [col-2-should-use-all-space   ] [COL-3-AS-小-AS-可能]

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

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

任何解决方案都不会比问题（表格）更差？

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

Answer 1

这是一个奇怪的解决方案，但在中间overflow: hidden设置div会给你我认为你想要的东西：

http://jsfiddle.net/qrBXL/

我一直在想弄清楚为什么会发生这种情况，但还没有找到它。我最好的猜测是overflow仅适用于矩形容器，并且div内的浮动包装使其基本上不是矩形。

Answer 2

当你说“尽可能小”时，我仍然认为它们有一个固定的宽度。在页面之间有不同的宽度是不好的。 话虽这么说，你可以看看这篇文章，找到一个很好的布局示例，它可以解决很多问题：http://www.alistapart.com/articles/holygrail/ 如果您不想完成所有这些操作，最后您将获得所有代码，并且可以复制并且可以复制。粘贴。