CSS+DIV对于现在的网站重构日趋被大家重视起来，尤其是一些大型的站点，其实，早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：

第一种：表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

第二种：提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

翻译自：Equal height boxes with CSS

原文：http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧

许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
其实有个简单的方法，使用display:table, display:table-row and display:table-cell 就可以实现，而且高度小的容器会自适应那些高度相对较高的，但是IE不支持这个属性，我们先不用去责备IE，相信以后会有所改善的。这里我制作了一个模型。

大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！

对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }
或者

#wrap{word-break:break-all;width:200px;}
效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}
或者

#wrap{word-break:break-all;width:200px; overflow:auto; }
效果：容器正常，内容隐藏

css定义字体垂直居中
文字的行高
比如 line-height: 22px;
就是高22像素,它就会在中间了
---------------------------------------------------
左右分列
这个做的过程中郁闷了下，其实是自己粗心，定义了右边左对齐，左边没有对齐

程序代码
<div style="float:left;>
我在左边
</div>
<div style="float:right;>
我在右边
</div>

或者