Question

不需要以下内容：

依赖图像（即“虚拟列”）
某种奇怪或“黑客”专门用于IE
要求IE以怪癖模式运行
没有像三个DIV中的一个重叠其他人的陌生感（即“圣杯”）
边距设置为高负值，使它们远离视图屏幕（再次“圣杯”布局）

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

我应该提一下，我正在寻找一种等高的布局。

任何？

编辑：我正在寻找100％的宽度，中心柱是液体。

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

编辑：背景可以是透明的，但我希望列之间有一条分界线，它们一直向上和向下运行。

Answer 1

当你谈论CSS时，没有“简单”这样的东西。

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

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

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

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

大脑就像一个降落伞：它很高兴但只有当它打开时才有用。

Answer 2

你可能会适应：

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

Answer 3

我同意罗伯特的观点。由于浏览器解释CSS规则并以不同方式呈现最终页面，我怀疑您会找到一个完美的解决方案，而不会在您的要求中更灵活。

Answer 4

您可以使用jS实现此目的。

如果您要创建3个Div，则一个浮动向左移动一个flot，中间向左移动边距为＆amp;正确的宽度使其居中。

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

使用Jquery非常简单。

Answer 5

http://960.gs/

这个可以用于3列布局（以及其他各种布局）。就我个人而言，我认为将div用于所有内容并不是一个好主意，但它很简单而且很好..它的工作原理。

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

Answer 6

YAML

“又一个多列布局” （YAML）是一个（X）HTML / CSS框架创造现代和灵活的浮动布局。结构非常好多功能的编程和绝对可供最终用户使用。

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

Answer 7

将页面分成三列，相同的高度？

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

没有怪癖，非常简单。

是否有简单的3列纯CSS布局？

7 个答案: