码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-21 11:44:52      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

印刷行业使用多列排版已经好多年了,网页设计师也非常青睐这种排版模式。窄栏更适于读者阅读,随着显示区域变得越来越宽,开发人员也一直在找寻合适的列宽。毕竟,与在整页报纸上一行一行的阅读相比,谁也不愿意在显示器上从左到右的查看多行文本。在过去的十年中,出现过一些巧妙的解决方案来应对此问题,但是没有一个解决方案可以像CSS3规范提供的方法那样简单易懂。

◇  分栏

    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提供,转载请注明出处。

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

标签:

原文地址:http://www.cnblogs.com/bsxt/p/5416173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!