两列div布局，左侧自适应，右侧固定宽度的列。

Question

两列div布局，左侧自适应，右侧固定宽度的列。

50

我想使用DIV制作一个双列布局，其中右侧列将具有固定的200像素宽度，左侧列将占用其余所有空间。

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

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

但是DIV呢？能否实现这一点？如果可以，那么如何实现呢？

- Silver Light

2

简短回答？是的。 - Khez

7个回答

12

下面是一个解决方案（但它有一些怪癖，如果你注意到了并且它们是个问题，请让我知道）：

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>

- leetNightshade

1

@Hussein inline-block 在 IE6 和 7 中可以工作，只是需要一些帮助，但在这里不必要，因为浮动元素已经胜出，并且当使用浮动时，显示属性会被忽略。我会再检查一下。 - clairesuzy

@clairesuzy 嗯，发现得不错。而且我已经有一段时间没有做 CSS 和 HTML 的东西了，下次我会尽量少出错，做得更好一点。> . < - leetNightshade

2

不用担心，这是一个正确的解决方案 ;) - 经过检查：上面的代码中不需要 display: inline-block，但如果遇到双倍边距 bug，display:inline 对于 IE6 及以下版本可能会有帮助 - 如果遇到该问题。 - clairesuzy

7

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上。

- clairesuzy

使用“float：right”或“float：left”与“overflow：hidden”是最佳解决方案，因为它不需要对非浮动元素进行计算，并支持“display：none”以制作滑块！此外，非浮动元素会将其宽度传播到所有可用空间！+1 +1 +1 - gavenkoa

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/

。

- Hussein

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>

- VoidA313

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（适用于三列布局）。

很抱歉给大家提供了这么多链接到这个人的网站，但我认为它是一个非常棒的资源。

- Mr Moose

这就是我要找的：http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm 但是我怎么看到代码呢？ :) - Silver Light

右键单击并查看源代码。每个页面基本上都包含了实现该页面上所见结果所需的标记和CSS。尝试调整给定页面的大小，以查看它如何影响页面。 - Mr Moose

1

@Silver Light，我使用过的大多数现代浏览器都允许您使用Ctrl+U查看源代码。 - leetNightshade

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

- Serhii Zghama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

以下示例按源顺序排列，即在HTML源中，列1出现在列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，这会产生等高列。