有没有简单的 3 列纯 CSS 布局？答案

【问题标题】：Is there a simple 3-column, pure CSS layout?有没有简单的 3 列纯 CSS 布局？
【发布时间】：2010-10-26 10:38:30
【问题描述】：

不需要以下内容的：

对图像的依赖（即“假列”）
专门为 IE 引入的某种怪异或“hack”
需要 IE 在 quirks 模式下运行
没有像三个 DIV 之一重叠其他的奇怪（即“圣杯”）
边距设置为高负数，使它们远离屏幕（同样是“圣杯”布局）

我在 CSS 中找不到不依赖上述任何一种的 3 列布局。依赖上述之一似乎否定了使用 CSS 优于表格的许多优势。每次我想改变左栏的宽度时，我都不想用 Photoshop 调整图像的大小。而且我不想拿出计算器来计算我的 DIV 必须在屏幕一侧有多少像素。

我应该提到我正在寻找一个等高的布局。

有人吗？

编辑：我正在寻找 100% 的宽度，中间列是液体。

编辑：我也希望以像素为单位指定左右列的宽度。

编辑：背景可以是透明的，但我想要一条上下的分界线。

【问题讨论】：

Errare humanum est - 我认为没有黑客你就无法逃脱。特别是因为高度相等。当然取决于您希望作为基础的 CSS 版本。
您需要指定边框和背景颜色/图像的要求。 3 列透明背景和无边框很容易做到。

标签： html css

【解决方案1】：

YAML

“又一个多列布局” (YAML) 是一个 (X)HTML/CSS 框架创造现代灵活的浮动布局。结构极其多才多艺的编程和最终用户绝对可以访问。

它包含一些 IE 错误修复，但您可以删除它们。

【讨论】：

【解决方案2】：

你也许可以适应：

http://matthewjamestaylor.com/blog/perfect-3-column.htm

【讨论】：

那个看起来很有希望，但我想我应该提到我正在寻找一个像素宽度列，而不是百分比宽度。同一个网站包含一个像素宽度模板（我上面提到的“圣杯”），但它是一个非常复杂的样式表，我不得不说它不如使用表格进行布局。不过，对于需要百分比宽度列的人来说，那会非常好。
这里是像素宽度版本：matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

【解决方案3】：

当您谈论 CSS 时，没有所谓的“简单”。

但是有一个简单的解决方案是跨浏览器、优雅地降级并且完全符合 HTML 和 CSS：使用具有三列的表格。

推理：DIV 并不意味着具有相同的动态高度。因此，CSS 对此不提供支持。如果您需要一个块元素来确保其子元素具有相同的高度，那么这就是表格的用途。

[编辑] 很抱歉冒犯了你们所有的 CSS 狂热分子，但坦率地说，当某些东西不是为了做某事而设计的并且你滥用它并且它不起作用时，请停止抱怨，好吗？ DIV 不是 TABLE，不能在不依赖 hack 的情况下用作一个 DIV。

[EDIT2] 正如various places 中已经说过的那样，不使用表格进行布局的原因是，在早期，表格是only 设计元素，这导致HTML几十个嵌套表。那很糟。但这并不意味着您不得使用单个表格来放置所有内容，然后依靠 CSS 使里面的内容看起来正确。

大脑就像降落伞：拥有它很好，但只有在它打开时才有用。

【讨论】：

表格被设计用于表达数据位之间的关系（一行中的每个项目都有共同点，列中的每个项目都有共同点）。一行中的所有单元格共享一个高度是结果，而不是原因。
嗯，你有一个目标，你有两个工具。一个不受欢迎，另一个根本不符合要求……你用哪一个？
+1 只要保持简单，使用表格进行布局就不会感到羞耻。
如果所有浏览器都支持 display: table-cell 等，这一切都不是问题——Internet Explorer 又一次为所有人破坏了它。
我不认为只有一种解决方案适合所有人。我已经很长时间没有使用表格来进行 3 列布局，包括复杂的布局，但我想如果它看起来是最好的解决方案，我可能会这样做。分析平面设计决定了要走的路，但我不禁用块而不是单元格和表格来思考，事情已经改变了。

【解决方案4】：

http://960.gs/

这个可用于 3 列布局（以及各种其他布局）。就个人而言，我不认为对所有事情都使用 div 是一个好主意，但它很简单而且很好......它很有效。

编辑：对于 100% 宽度的布局 http://www.alistapart.com/articles/fluidgrids/ 可能会有所帮助，但我不确定这种布局是否仍然符合“简单”的条件。

【讨论】：

抱歉，应该提到我正在寻找 100% 的宽度（中心列是液体）。
是的，列表中的那个看起来有点复杂。其中一个不太清楚哪个不太理想，使用复杂的样式表，或者使用表格，即使表格不是用于布局的。

【解决方案5】：

把页面分成三列，高度一样？

<html>
<head>
<style type="text/css">
#col_wrapper{
    height: 400px;
}

.col{
    width: 33%;
    float:left;
    height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
    <div class="col">
        one
    </div>
    <div class="col">
        two
    </div>
    <div class="col">
        three
    </div>
</div>
</body>

没有怪癖，很简单。

【讨论】：

应该提到固定高度不起作用。一页的中间栏可能有 5 段文字，另一页可能有 25 段。

【解决方案6】：

您可以通过使用 jS 来实现这一点。

如果您要创建 3 个 Div，左一左一右，中间作为左右边距，宽度使其居中。

然后使用一点 JS，每个 div 都有自己的 ID，您可以计算它们的高度，将 2 个较低的设置为最高值。

使用 Jquery 非常简单。

【讨论】：

没错，用 javascript 很容易......但他要求一个纯 CSS 解决方案。

【解决方案7】：

我同意罗伯特的观点。由于浏览器对 CSS 规则的解释和最终页面呈现方式的不同，我怀疑您是否会找到一个完美的解决方案，而无需更加灵活地满足您的要求。

【讨论】：