固定+流体布局

Question

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

Please see this demo

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

我尝试setting the 2nd column's margin-left equal to the width of the first column，但这意味着第二列没有扩展到所有可用空间。它只占用了所需的空间，这还不足以保持布局的吸引力。

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

Answer 1

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

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

您也可以在CSS中使用calc（），但这并不受广泛支持。

Answer 2

您可能需要考虑使用media queries来触发其他CSS规则，具体取决于视口大小。

这应该做你要求的：

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

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

    #left { float: none; }


}