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

Sea*_*ean 5 html css

一个不需要以下内容:

  1. 依赖图像(即"人造柱")
  2. 某种奇怪或"黑客"专门针对IE
  3. 需要IE以怪癖模式运行
  4. 没有像三个DIV中的一个重叠其他人的陌生感(即"圣杯")
  5. 边距设置为高负数,使它们远离视图屏幕(再次"圣杯"布局)

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

我应该提一下,我正在寻找一个高度相等的布局.

任何人?

编辑:我正在寻找100%的宽度,中心柱是液体.

编辑:我也希望指定左右列的宽度(以像素为单位).

编辑:背景可以是透明的,但我希望列之间的分界线一直向上和向下运行.

Aar*_*lla 16

当你谈论CSS时,没有"简单"这样的东西.

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

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

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

[EDIT2]正如在各个地方已经说过的那样,不使用表格进行布局的原因是,在早期,表格是唯一的设计元素,并且导致HTML具有数十个嵌套表格.那很糟.但这并不意味着你不能使用单个表来放置所有东西,然后依靠CSS来使内部的东西看起来正确.

大脑就像一个降落伞:它很高兴,但只有在它打开时才有用.

  • 好吧,你有一个目标,你有两个工具.一个是不赞成的,另一个根本不符合法案......你使用哪一个? (10认同)
  • +1只要它保持简单,就不会使用表格进行布局. (4认同)
  • 表格被设计用于表达数据位之间的关系(一行中的每个项目具有共同点并且列中的每个项目具有共同点).让一行中的所有单元共享高度是结果,而不是原因. (3认同)