多栏自适应布局问题浅谈
作者:邦彦 来源:口碑网 发布时间:2010-08-16 12:56:00
在网页局部的布局上,需要采用大量的自适应,来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因,导致重叠、溢出、撑开等破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的自适应问题。
1、两栏自适应布局
在实际项目中,常常遇到如红色线框部分的两栏自适应问题。其关键点是,左右两栏均不定宽,右侧栏条目数量不定。
针对这种场景,可以采用两栏均浮动的方法。参考 Object-oriented CSS 中应用到的布局方案,则需要套用两层标签实现,两栏中一栏浮动,另一栏宽度自适应:
.wrap{background:gray;}.left{float:left;background:orange;}.right{ display:table-cell;_display:block;zoom:1;background:lime;}<div class="wrap"> <div class="left">左侧栏</div> <div class="right">右侧栏</div></div>
点此查看该代码示例:two_column_layout.html
由于IE6并不支持 display:table-cell 属性,必须通过 CSS hack 来弥补这个缺陷。这里可以稍作改进,右侧栏直接设定 overflow:auto;zoom:1 或者 overflow:hidden;zoom:1 的样式。
2、三栏自适应布局
谈到三栏自适应布局,这应该是最为基本的网页排版形式了。以Amazon首页来说,其自适应布局采用的是与Object-oriented CSS相类似的方案:
.wrap{background:gray;}.left{float:left;width:250px;background:red;}.right{float:right;width:300px;background:orange;}.main{overflow:hidden;zoom:1;background:lime;}<div class="wrap"> <div class="left">左侧栏</div> <div class="right">右侧栏</div> <div class="main">主体部分</div></div>
点此查看该代码示例:three_column_layout.html
该案例中,左右侧栏分别浮动,主体部分(中间栏)溢出隐藏。这种布局的好处在于,无论外框宽度如何变化,主体部分总能自适应。但从页面结构上来说,节点物理顺序和视觉逻辑顺序不一致,最关键的主体部分内容被排在整个文档的后面,主次分布不合理,总觉得有一些遗憾。另外也会存在一些潜在的风险:如果右侧栏包含大量脚本资源,可能会影响甚至阻塞整个页面的载入(如果选择使用 iframe或者 ajax 来加载就另当别论)。
众所周知,HTML文档是顺序解析的。在这张使用 WebPageTest 对 Amazon 首页渲染过程的某一时刻截图中,可以发现左右两侧的内容率先予以呈现,而主体部分会造成一定时间的空白。因此这种方案并不宜用于整站页面框架的搭建。
考虑到页面结构的复杂程度和体积大小,大型站点的布局方案,个人倾向于采用诸如负边距之类自适应布局。实现原理可以参考《Creating Liquid Layouts with Negative Margins》这篇文章。利用负边距可以构建出很多复杂的流体布局形式。这里以 YUI 框架提供的栅格方案为例来说明:
.wrap{}.section{float:left;margin-right:-40em;width:100%;}.g1{margin-right:310px;float:none;width:auto;position:static;}.g2{float:right;margin-left:-40em;width:100%;}.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}.left{float:left;width:200px;position:relative;background:orange;}.aside{float:right;width:300px;position:relative;background:lime;}<div class="wrap"> <div class="section"> <div class="g1"> <div class="g2"> <div class="main">主体部分</div> </div> <div class="left">左侧栏</div> </div> </div> <div class="aside">右侧栏</div></div>
点此查看该代码示例:negative_margin_layout.html
虽然实现上要比其他方案更为复杂,需要嵌套多层标签,在一定程度上有失 HTML 文档的简洁性。但一个重要的好处是,其各个区块(左侧栏、主体部分、右侧栏)文档结构顺序可以随意调换,而在视觉呈现上却没有任何差异。目前口碑网的前端布局系统正是应用了这种解决方案,并有专用工具实现布局框架的自动化生成。
3、自适应栅格化布局
Object-oriented CSS 提出了一种结构化的多栏自适应布局,利用栅格控制容器宽度,内容控制容器高度。使得多层嵌套的自适应栅格化布局清晰明了。如果应用到类似表格的页面排版,这种方法行之有效。详细参考自适应栅格化布局代码示例:grid_layout.html
而目前大量的网站正在使用 950px/960px 宽度的栅格系统,固定最小栅格单元的宽度,保证整体结构的合理、稳定和一致。与其相比,在局部页面布局中,建议使用 Object-oriented CSS 这种简洁的、基于百分比的栅格方案。如果可以保证内部所有区块自适应,就只需要对最外层容器设定宽度,显得更为灵活。


猜你喜欢
- 安装方法: regsvr32 parmf.dll附 如果想取消注册可以:regsvr32 /u&nb
- 使用了application及结合数据库来保存统计数据 <html><head><title>
- 鉴于人手严重不足(当时算两个半人的资源),打消了逐个库手动去改的念头。当前的程序结构不允许搞革命的做法,只能搞搞改良,所以准备搞个自动化工具
- 如何显示SQL数据库所有表的名称?<%strSQLDSN = "xxxx"strSQLUser
- 最近一直在做Dnn模块的开发,过程中碰到这么一个问题,需要同时插入N条数据,不想在程序里控制,但是SQL Sever又不支持数组参数.所以只
- 1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安
- 现在网页设计师除了把页面做的漂亮以外,越来越注重“用户体验”,就是要做“别让用户思考”的网页,使网站真正做到“可用性”。望望结合几年的工作经
- 上回 说到“大屏幕浏览页面的良好体验,本就应该用户自己调整窗口。”根据屏幕不同大小,缩小窗口出横向滚动条在所难免,但理想情况下,页面应该能适
- 软件环境: 1、操作系统:Windows 2000 Server 2、数 据 库:Oracle 8i R2 (8.1.7) for NT 企
- -crop参数是从一个图片截取一个指定区域的子图片.格式如下:convert -crop widthxheight{+-
- <div class=”A” style=”position:relative;”>A 
- 在这里给出是的WindowsXP操作系统下的安装过程一、下载安装文件到MySQL官方网站找到ZIP文件提示:有些是安装文件,安装时会有提示,
- 如果要问做什么事是最有吸引力,那就是创建Web应用。Web设计者们对设计交互式的Web没有什么更好的办法,却对我们做桌面软件的同事投去少许羡
- 以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的。其他最为常用也是最为需要
- Filed under 数据库技术Leave a commentSQL Server命令行导数据两种方式bcp和sqlcmd先说一下bcp:
- 有些时间没更新blog了,这两天为了更新<code collection>,于是重写了语法高亮的模块,这次是一个引擎,你可以根据
- 以下是menu.asp代码 程序代码 <% '-----------------------------------
- 功能是:以一个关键字为索引,搜索整个数据库,然后返回那个关键字所在的表名和列名。(很赞...特别是入侵的时候找不到用户名与密码所在的表的时候
- 130 :文件格式不正确。(还不是很清楚错误的状况) 145 :文件无法打开。 1005:创建表
- 写这个的目地,主要是系统理下目前产品设计的流程,提醒自己尽量去避免一些常见的问题,也能让大家系统的了解天极网的产品设计流程。当然,不保证任何