不需要以下内容的:
- 依赖图像(即“人造栏”)
- 专门为 IE 安装的某种怪异或“hack”
- 要求 IE 运行在 quirks 模式下
- 没有像三个 DIV 中的一个与其他 DIV 重叠那样奇怪(即“ chalice ”)
- 边距设置为高负数,使其远离屏幕(再次“ chalice ”布局)
我在 CSS 中找不到不依赖于上述之一的 3 列布局。并且依赖于上述之一似乎否定了使用 CSS 而不是表格的很多优势。我不想每次想更改左栏的宽度时都必须打开 Photoshop 并调整图像大小。而且我不想不得不拿出计算器来计算我的 DIV 必须离开屏幕一侧的像素数。
我应该提一下,我正在寻找等高布局。
有人吗?
编辑:我正在寻找 100% 的宽度,中间的列是液体。
编辑:我还希望以像素为单位指定左右列的宽度。
编辑:背景可以是透明的,但我想要一直上下延伸的列之间的分界线。
最佳答案
当你谈论 CSS 时,没有所谓的“简单”。
但是有一个跨浏览器的简单解决方案,可以优雅地降级并且完全兼容 HTML 和 CSS:使用具有三列的表格。
推理:DIV 并不意味着具有相同的动态高度。因此,CSS 对此不提供支持。如果您需要一个 block 元素来确保其子元素具有相同的高度,那么这就是表格的用途。
[编辑] 很抱歉冒犯了你们所有的 CSS 狂热分子,但是,坦率地说,当某些东西不是为了做某事而设计的,而你滥用它,但它不起作用时,请停止提示,好吗? DIV 不是 TABLE,如果不依赖 hack 就不能用作 TABLE。
[EDIT2] 正如在 various places 中所说的那样,不使用表格进行布局的原因是,在早期,表格是唯一的设计元素,这导致 HTML 中有数十个嵌套表格。那很糟。但这并不意味着您不能使用单个表格来放置所有内容,然后依靠 CSS 使里面的内容看起来正确。
大脑就像降落伞:拥有它很好,但只有在打开时才有用。
关于html - 是否有一个简单的 3 列纯 CSS 布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/867667/