50

我想使用 DIV 进行两列布局，其中右列将具有 200px 的固定宽度，而左列将占用剩余的所有空间。

如果您使用表格，这很容易：

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

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

4

7 回答 7

88

以下示例按源代码排序，即第 1 列出现在 HTML 源代码中的第 2 列之前。列出现在左侧还是右侧由 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 ; 这导致等高的列。

于 2011-04-13T08:42:48.253 回答
12

这是一个解决方案（它有一些怪癖，但如果你注意到它们并且它们是一个问题，请告诉我）：

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>
于 2011-04-13T08:02:38.117 回答
6

CSS：

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML： 

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

上面应该可以工作，如果你想给它宽度和居中，你可以把代码放在包装器中，overflow:hidden在没有宽度的列上是让它垂直包含的关键，因为不环绕侧列（可以是左或右）

如果您需要它的支持， IE6可能也需要zoom:1在#content div 上设置

于 2011-04-13T08:18:04.323 回答
5

CSS 解决方案

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

在http://jsfiddle.net/NP4vb/3/检查工作示例

jQuery 解决方案

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

检查工作示例http://jsfiddle.net/NP4vb/

于 2011-04-13T08:00:46.947 回答
1

我最近看到这个网站使用 CSS 进行液体布局。 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts（查看下面链接中的演示页面）。

作者现在提供了一个固定宽度布局的例子。查看; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width。

这提供了以下示例， http: //matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm（对于我认为的两列布局）

http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm（用于三列布局）。

很抱歉有这么多指向这个家伙网站的链接，但我认为这是一个很棒的资源。

于 2011-04-13T08:01:17.603 回答
1

我认为这是一个简单的答案，这将根据父宽度将子开发者分成 50%。

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>
于 2015-06-03T03:35:33.180 回答
-1 

#wrapper {
  margin-right: 50%;
}
#content {
  float: left;
  width: 50%;
  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>

于 2017-08-23T23:56:06.533 回答