html - 是否有一个简单的 3 列纯 CSS 布局？

Question

不需要以下内容的:

1. 依赖图像(即“人造栏”)
2. 专门为 IE 安装的某种怪异或“hack”
3. 要求 IE 运行在 quirks 模式下
4. 没有像三个 DIV 中的一个与其他 DIV 重叠那样奇怪(即“ chalice ”)
5. 边距设置为高负数，使其远离屏幕(再次“ chalice ”布局)

我在 CSS 中找不到不依赖于上述之一的 3 列布局。并且依赖于上述之一似乎否定了使用 CSS 而不是表格的很多优势。我不想每次想更改左栏的宽度时都必须打开 Photoshop 并调整图像大小。而且我不想不得不拿出计算器来计算我的 DIV 必须离开屏幕一侧的像素数。

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

有人吗？

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

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

编辑:背景可以是透明的，但我想要一直上下延伸的列之间的分界线。

Answer 1

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

但是有一个跨浏览器的简单解决方案，可以优雅地降级并且完全兼容 HTML 和 CSS:使用具有三列的表格。

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

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

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

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