CSS实例：CSS实现的等高网页布局

对于网页的美观协调，有时我们需要采用特殊的布局技巧。传统的等高布局往往依赖于 JavaScript 实现，但现在，我们可以借助 CSS 来完成这一任务。特别是一种由 silence 提出的纯 CSS 等高布局方法，该方法融合了“隐藏容器溢出”，“正内补丁”和“负外补丁”的技巧。

让我们通过一个实际的例子来深入理解这种方法。假设我们有三列等高的布局，以狼蚁网站SEO优化的 XHTML 代码为例：

在 HTML 结构中，我们有三个 div，分别代表左列、中列和右列。其中左列和右列的内容相对较少，但我们需要它们与中间列（可能包含更多内容）的高度保持一致。

对应的 CSS 代码为：

```css

{

margin: 0;

padding: 0;

}

wrap {

overflow: hidden; / 隐藏溢出内容 /

width: 1000px;

margin: 0 auto; / 水平居中 /

}

left, center, right {

margin-bottom: -10000px; / 负外边距 /

padding-bottom: 10000px; / 正内补丁 /

}

left {

float: left;

width: 250px;

background: 00FFFF; / 青色背景 /

}

center {

float: left; / 使用浮动实现三列布局 /

width: 500px;

background: FF0000; / 红色背景 /

}

right {

float: right; / 右浮动 /

width: 250px; / 右列宽度 /

background: 00FF00; / 绿色背景 /

}

```这段 CSS 代码的核心在于 `wrap` 的 `overflow: hidden;` 和子列的 `margin-bottom` 与 `padding-bottom` 的配合。通过这种技巧，即使左列和右列的内容较少，它们的高度也会与中间列保持一致。值得注意的是，这种方法对于 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 等浏览器都是兼容的。如果你在为子列添加边框属性时可能会遇到问题。因为有一部分区域被隐藏了，所以下边框可能不会显示。但这并不影响整体布局的效果。这种看似简单的 CSS 实现方法，实际上蕴含了丰富的技巧与智慧。对于追求网页美观与协调的我们来说，非常值得一试。