是否有一个简单的3列，纯CSS布局？ [英] Is there a simple 3-column, pure CSS layout?

问题描述

不需要以下内容：

1. 依赖图片（即假列）


2. 某种奇怪或hack专门用于IE


3. 需要IE以怪异模式运行




5. 边距设置为高负数，将它们置于视图屏幕之外（再次称为圣杯布局）
/ li>

我在CSS中找不到一个不依赖上述其中一个的3列布局。并且依赖上面的一个似乎否定了使用CSS超过表的很多优点。我不想要每次我想改变我左边的列的宽度的时候，抽出Photoshop和调整图像的大小。我不想拉出计算器来计算我的DIV必须在屏幕边上有多少像素。

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

任何人？

宽度为100％，中心列为液体。

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

编辑：背景可以是透明的，但我想在列之间的分界线上下运行。

解决方案

当你谈论CSS时，没有什么简单。

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

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

对不起，冒犯你的所有CSS狂热但坦率地说，当某些东西不是设计为做某事，你滥用它，它不工作，请停止抱怨，好吗？一个DIV不是一个表，不能用作一个不依赖于hacks。

正如已经在各种地方，不使用表格布局的原因是，在早期，表是仅的设计元素，并导致HTML有几十个嵌套表。那很糟。但这并不意味着不能使用单个表来放置所有内容，然后依赖CSS来使内部的内容正确。

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

One that doesn't require the following:

1. Reliance on images (i.e. "faux columns")
2. Some kind of weirdness or "hack" put in specifically for IE
3. Requires IE to run in quirks mode
4. Doesn't have strangeness like one of the three DIVs overlapping the others (i.e. "holy grail")
5. Margins set to high negative numbers placing them well off the viewscreen (again "holy grail" layout)

I can't find a 3-column layout in CSS that doesn't rely on one of the above. And relying on one of the above seems to negate a lot of the advantage of using CSS over tables. I don't want to have to whip out Photoshop and resize an image every time I want to change the width of my left column. And I don't want to have to pull out the calculator to figure out how many pixels off the side of the screen my DIV has to be.

I should mention that I'm looking for an equal-height layout.

Anyone?

EDIT: I'm looking for a width of 100%, with the center column being liquid.

EDIT: I'm also hoping to specify the width of the left and right columns in pixels.

EDIT: Backgrounds can be transparent, but I would like a dividing line between the columns which runs all the way up and down.

解决方案

There is no such thing as "simple" when you talk about CSS.

But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.

Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.

[EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.

[EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.

A brain is like a parachute: It's nice to have but only useful when it's open.

这篇关于是否有一个简单的3列，纯CSS布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！