responsive-design - 固定+流体布局

Question

如何创建 2 列布局，1 列固定宽度，另一列占用剩余空间？

请看这个演示。

最初，我尝试了一个流畅的布局，但不喜欢左列变得太小，所以我想保持它的宽度不变。

我尝试将第二列的 margin-left 设置为等于第一列的宽度，但这意味着第二列没有扩展到所有可用空间。它只占用所需的空间，这不足以保持布局的吸引力。

如何使#right 列填充#container 中的所有剩余空间？

Answer 1

最简单的方法是display:table。这可能不是最好的方法，但它确实有效。你可以在这里看到我用你的代码创建的小提琴：

http://jsfiddle.net/hp8Vg/1/

你也可以在你的 CSS 中使用 calc() ，但这并没有得到广泛的支持。

Answer 2

您可能需要考虑使用媒体查询来根据视口大小触发其他 CSS 规则。

这应该可以满足您的要求：

@media only screen and (max-width: 960px) {

    #right { float: none; width: 100%; }

    #left { float: none; }


}