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。这将引入一个新的block formatting context。您可以在Can overflow:hidden affect layout?中找到更多信息。

jsFiddle Demo

Answer 2

您还可以使用div来包装两个列（如果您愿意，将它们作为一个块居中） - 然后设置第一列的宽度，并使用第二列的绝对定位使其左边框成为边缘第一列及其右边框包装的边缘。

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;">

<div style="width:100px; height:100px; padding:15px; background-color:aqua;">
</div>

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px;  background-color:blue;">
</div>

</div>

JSFiddle

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

2 个答案: