具有流体左列和固定右列的两列 div 布局

Posted 2023-03-06

【中文标题】具有流体左列和固定右列的两列 div 布局

【英文标题】：Two column div layout with fluid left and fixed right column

【发布时间】：2011-08-04 11:55:36

【问题描述】：

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

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

<table >
  <tr>
    <td>Column 1</td>
    <td >Column 2 (always 200px)</td>
  </tr>
</table>

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

【问题讨论】：

简短回答？ Yes

【参考方案1】：

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/

【参考方案2】：

我最近看到这个网站使用 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（用于三列布局）。

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

【讨论】：

这就是我要找的：matthewjamestaylor.com/blog/… 但是我怎么看代码呢？ :)

右键查看源码。每个页面几乎都包含必要的标记和 CSS，以实现您在该页面上看到的结果。尝试调整给定页面的浏览器大小，看看它如何影响页面。

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

【参考方案3】：

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

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

【讨论】：

@Hussein inline-block 确实在 IE6 和 7 中工作，它只需要一些帮助，但是在这里我没有必要使用浮点数，并且使用浮点数时会忽略显示属性..我'我会检查一下

@clairesuzy 是的，很好。而且我也有一段时间没有做css和html的东西了，下次我会尽量少一点马虎，更好一点。 >.

不用担心，这是一个正确的解决方案 ;) - 检查后：display: inline-block 在上面的代码中不应该是必需的，但display:inline 可能对 IE6 及以下版本有用，因为双边距错误 - 如果遇到了

【参考方案4】：

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 可能如果你需要它的支持，也需要在#content div 上设置zoom:1

【讨论】：

float: right 或 float: left 与 overflow: hidden 是最好的解决方案，因为不需要计算在 非浮动元素 上并支持 display: none 来制作滑块！ 非浮动元素也将其宽度传播到所有可用空间！ +1 +1 +1

【参考方案5】：

以下示例按源代码排序，即第 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；这会导致等高的列。

【讨论】：

另一个不错的，虽然你不需要清除 div，因为包装是浮动的，它已经清除（包含浮动列）；）

是的，它就在那里，因为我有一个习惯，每当我使用浮动时都会添加 clear :)

@clairesuzy：我现在明白为什么我需要清除 div...当列高不相等时，清除 div 确保以下项目（例如页脚，或者小提琴中的惊喜我按钮) 不干扰任一列。

谢谢，在这种情况下完全正确，我正在混淆我使用的另一个布局 - link - 它构建在一个包含浮动/包装器的整体中 - 上述布局可以在任一位置执行任意数量的侧边栏侧面 - 我用它作为几乎所有东西的基础;）对不起，我把它和你的混淆了

这一直有效，直到我在侧边栏内添加一个 ，然后由于某种原因，流体列向下包裹在侧边栏下方。

【参考方案6】：

我认为这是一个简单的答案，这将根据父宽度将子开发者分成 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>

【参考方案7】：

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