Web开发实例教程：如何创建多列布局

◇ 分栏
AwesomeCo每个月都会出版一份简报发给员工。公司使用了流行的web电子邮件系统。基于电子邮件的简报并不漂亮而且难于维护。公司曾决定将简报放在内网的网站上，并计划通过电子邮件将简报的链接发送给所有员工。简报的页面原型如下图所示。



宣传部门的新主管有印刷行业的工作背景，她要求简报看起来更像真正的报纸，使之分两栏而不是一栏显示内容。
如果你尝试过用div加浮动的方式实现文本多栏显示，就会理解这种做法的难处。其最大的问题在于需要手工确定拆分文本的位置。在排版软件(如工nDesign )中，我们可以将文本框“链接”起来，以便当一个文本框被内容填满的时候，文本会进入与之相“链接”的文本区域。目前，Web领域尚无类似的实现机制，但有其他简单易用的方法。我们可以取某个页面元素，拆分其内容为多列，使每一列具有相同的宽度。

编写简报所需的标记都是相当基础的HTML代码。因为简报内容会在写好后变动，所以在简报还没有正式发布前，先用占位文本来代替其真实内容。你可能会疑惑为什么我们不使用section等新的HTML标签来实现，这是因为在IE浏览器中，我们的兼容方案无法与之兼容。





改为两列显示仅需要添加如下代码到样式表中:




下图所示的效果看起来更好了。我们可以为其加入更多的内容，浏览器会自动判断如何均
匀地分列折行。注意，浮动的元素仍然浮动在列旁边而不是包含在列里。


◇ 回退
IE8及其以下版本不支持CSS3的分栏显示，所以我们使用j Query的Columnizer插件一1一来实现兼容方案。借助Columnizer插件，我们可以把内容均匀地拆分为多列，代码如下:



没有开启JavaScript支持的用户只能看到单列显示的文本内容，但他一样可以阅读内容，因为与显示内容相关的标签是以线性方式组织的，所以代码适用于这种场景。我们可以通过JavaScript检测浏览器是否支持特定元素。如果检索已存在的CSS属性，则返回布尔值true'。如果返回值是null，则说明相应的CSS属性不可用。





检查浏览器是否支持分栏显示，如果不支持，则使用插件。
刷新一下IE浏览器，可以看到两栏简报的效果。如下图所示，页面看起来也许还不完美，所以需使用CSS或JavaScript调整看上去不协调的元素，这些问题我留给你来处理。
文中的条件语句，我们能够针对特定版本的IE浏览器做特殊处理。




把文章分为多栏显示会提高文章的易读性。不过，文章较长时，用户可能不喜欢每次还要拖回最上方才能阅读下一栏。因此，请小心使用分栏。

本文由尚学堂在线学习平台www.sxt.cn提供，转载请注明出处。