悠悠博客 关注Ajax技术与web开发

CSS3的Spec已经接近尾声，我相信在IE8和各种主流浏览器中将会得到支持。对比于当前CSS最高版本，CSS3做了很大的改动，初步浏览了一下CSS3的Spec，发现了一个很有用的功能就是在css3的规范中可以直接通过CSS来实现分栏、布局表格还有图片的定位等。效果如下图：

实现这样的布局只需要如下的CSS代码：

通过这段代码，可以实现3行6列的布局，并且可以定位图片到哪几个单元格中。其中“float:page top right;”是使表格浮动在页面上方的顶部，“width:3gr”是指图片的宽度跨越3个"grid unit"即3个单元格，注意这里的3gr必须是在所有Grid内部的，外围的不计算在内。详细的解释可以参照W3C官方文档。