两列div布局与流体左和固定右列 [英] Two column div layout with fluid left and fixed right column

问题描述

我想用的DIV，其中右边一栏将有200像素的固定宽度和左边将采取所有剩下的空间做一个两栏布局。

I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left.

这是很容易，如果你使用的表：

It's quite easy, if you use tables:

<table width="100%">
  <tr>
    <td>Column 1</td>
    <td width="200">Column 2 (always 200px)</td>
  </tr>
</table>

但是DIV怎么样？有可能做到这一点吗？如果是，那么如何？

But how about DIVs? Is it possible to accomplish this? If yes, then how?

推荐答案

以下示例是源序列，即列1出现在HTML源中的第2列之前。左栏或右栏是否由CSS控制：

The following examples are source ordered i.e. column 1 appears before column 2 in the HTML source. Whether a column appears on left or right is controlled by CSS:

固定右

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

修复左

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

备用解决方案是使用 display：table-cell ;这导致等高列。

Alternate solution is to use display: table-cell; which results in equal height columns.

这篇关于两列div布局与流体左和固定右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！