如何在不使用表格的情况下复制此 3 列布局？
因无法正确弄清楚这一点而感到有点沮丧。我正在更新一个旧网站，并试图在没有表格的情况下完成这项工作。我可以使用 box flex 来做到这一点，但很多浏览器不支持它。布局是这样的
[col-1-尽可能小][ col-2-应该使用所有空间 ][col-3-尽可能小]
列不需要具有相同的高度，并且所有 3 列组合的总宽度受到父列的约束。
如果我使用浮动，我无法让中间的列展开。 col-1 和 col-2 的宽度不是固定宽度。
有没有比问题（表格）更糟糕的解决方案？
这是基于表格的解决方案的示例： http://jsfiddle.net/7dsCV/1/
Feeling a bit frustrated at not being able to properly figure this out. I'm updating an old site and am trying to make this work without tables. I can do it with box flex but its unsupported by a lot of browsers. The layout is something like this
[col-1-as-small-as-possible][ col-2-should-use-all-space
][col-3-as-small-as-possible]
Columns don't need to be the same height, and the overall width of all 3 columns combined is constrained by a parent.
If I use floats I can't get the middle column to expand. The width of the col-1 and col-2 are not fixed widths.
Any solutions that don't feel worse then the problem(tables)?
here's an example of the table based solution: http://jsfiddle.net/7dsCV/1/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是一个奇怪的解决方案，但是在中间的
div上设置overflow:hidden会给你我相信你想要的东西：http://jsfiddle.net/qrBXL/
我一直想弄清楚为什么会发生这种情况，但还没有抽出时间。我最好的猜测是
overflow仅适用于矩形容器，并且浮动在div内包裹使其本质上是非矩形的。It's a strange solution, but setting
overflow: hiddenon the middledivwill give you what I believe you want:http://jsfiddle.net/qrBXL/
I've been meaning to figure out why this happens but haven't gotten around to it yet. My best guess is that
overflowonly works on rectangular containers and floats wrapping within thedivmake it essentially non-rectangular.当你说“尽可能小”时，我仍然假设它们有固定的宽度。页面之间的宽度不同会很糟糕。
话虽这么说，您可以查看这篇文章，了解一个非常好的布局示例，它可以解决很多问题： http://www.alistapart.com/articles/holygrail/
如果您不想完成所有这些，那么最后您就拥有了所有代码，可以复制和使用了。粘贴的。
When you say "small as possible" I still assume they have a fixed width. It would be bad to have different widths between the pages.
That being said, you can look at this article for a very good example of a layout which takes care of a lot of issues: http://www.alistapart.com/articles/holygrail/
If you don't want to go through all of it, at the end you have all the code, ready to be copied & pasted.