css - 我可以创建一个两列布局来流畅地适应狭窄的窗口吗？

Question

我正在尝试设计一个包含两列内容的页面，div#left 和 div#right。 (我知道这些不是正确的语义标识符，但它使解释更容易)两列的宽度是固定的。

期望的结果 - 宽视口(viewport)

当视口(viewport)太窄无法并排显示时，我希望#right 堆叠在#left 之上，如下所示:

期望的结果 - 窄视口(viewport)

我的第一个想法是简单地将 float: left 应用于 #left 并将 float: right 应用于 #right，但这使得 #right attach 本身到窗口的右侧(毕竟这是 float 的正确行为)，留下一个空白空间。当浏览器窗口非常宽时，这也会在列之间留下很大的差距。

错误 - div#right 与视口(viewport)左侧不齐平

将 float: left 应用于两个 div 会导致当窗口太小时错误的 div 移动到底部。

错误 - div#right 不在 div#left 之上

我可能可以用媒体查询来做到这一点，但 IE 直到版本 9 才支持这些。源代码顺序并不重要，但我需要至少在 IE7 中工作的东西。不借助 Javascript 是否可以做到这一点？

Answer 1

向左浮动的 2 列添加一个外部容器，但没有特定的宽度。

检查 fiddle .