5 
<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>

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

  • 我希望两列的样式都是独立的。我在这里找到了几个解决方案，但是如果我更改左列的宽度，则需要同时更改右列的样式（例如边距）。

  • 我不需要支持旧浏览器。如果它是标准的，那就没问题了。

4

2 回答 2

2

应用于overflow: hidden第二个 div。这将引入一个新的块格式化上下文。您可以在Can overflow:hidden 影响布局中找到更多信息？.

jsFiddle 演示

于 2012-05-13T10:06:52.677 回答
0

您还可以使用 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

于 2014-04-08T21:04:33.167 回答