HTML CSS:修复和拉伸宽度两列布局

Question

<div style="width: 800px; height: 600px">

    <div style="float:left; width: 100px">
        left fixed-width column
    </div>
    <div style="???">
        right stretching column (the width should be 700px in this case.)
    </div>

</div>

创建两个列布局的标准方法是什么,其中左列是固定大小而右侧是拉伸？

• 我希望两个列的样式都是独立的.我在这里找到了几个解决方案,但是如果我改变左列的宽度,则右列的样式(例如边距)需要随之改变.

• 我不需要支持旧的浏览器.如果它是标准的,那就没关系.

Answer 1

适用overflow: hidden于第二个 div。这将引入一个新的块格式化上下文。您可以在溢出：隐藏会影响布局吗？中找到更多信息。。

jsFiddle 演示