文档章节

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

2
 2846613430
发布于 2016/04/21 11:19
字数 897
阅读 40
收藏 1


◇  分栏

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

    宣传部门的新主管有印刷行业的工作背景,她要求简报看起来更像真正的报纸,使之分两栏而不是一栏显示内容。

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

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

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

 

下图所示的效果看起来更好了。我们可以为其加入更多的内容,浏览器会自动判断如何均

匀地分列折行。注意,浮动的元素仍然浮动在列旁边而不是包含在列里。

◇  回退

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

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

检查浏览器是否支持分栏显示,如果不支持,则使用插件。

刷新一下IE浏览器,可以看到两栏简报的效果。如下图所示,页面看起来也许还不完美,所以需使用CSSJavaScript调整看上去不协调的元素,这些问题我留给你来处理。

文中的条件语句,我们能够针对特定版本的IE浏览器做特殊处理。

 

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


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

© 著作权归作者所有

2
粉丝 2
博文 25
码字总数 24679
作品 0
海淀
私信 提问
CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性...

楠木楠
2016/12/06
134
0
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei
2014/03/05
555
0
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
25 个 CSS3 高级用户界面特效教程

1、SVG & CSS 交互图表 该教程将让你对 SVG 效果创建与交互有一定了解。 2、CSS3 3D 动画直方图 该教程将叫你创建一个完整的 3D 直方图。你需要遵循一些要求,使直方图有独立的背景,能够自适...

彭博
2013/04/09
8.1K
19
HTML5开发手机App之:CSS全教程-何韬-专题视频课程

HTML5开发手机App之:CSS全教程—20784人已学习 课程介绍 全面解读CSS2,CSS3以及CSS布局模式等各项知识点,深入系统了解CSS能够实现的各种功能并加以灵活运用。 课程收益 使致力于开发Web前...

pkutao
2016/03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
35分钟前
3
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
38分钟前
3
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部