多栏自适应布局问题浅谈
作者:邦彦 来源:口碑网 发布时间: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 这种简洁的、基于百分比的栅格方案。如果可以保证内部所有区块自适应,就只需要对最外层容器设定宽度,显得更为灵活。


猜你喜欢
- 一、 简单查询简单的Transact-SQL查询只包括选择列表、FROM子句和Where子句。它们分别说明所查询列、查询的表或视图、以及搜索
- 堆排序堆是一种完全二叉树(是除了最后一层,其它每一层都被完全填充,保持所有节点都向左对齐),首先需要知道概念:最大堆问题,最大堆就是根节点比
- translate函数语法:translate(expr, from_strimg, to_string)简介:translate返回exp
- 本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码,供大家参考,具体内容如下全部代码:<!DOCTYPE html&
- 在Django中有非常强大的URL模块,可以按照开发者的想法来制定清晰的URL,同时支持正则表达式。此外,在URL中还可以传递参数。1.&n
- 本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"
- 1、安装执行命令pip install virtualenv为了使用virtualenv更方便,可以借助 virtualenvwrapper
- 介绍:pyenv-virtualenv是pyenv的一个插件,作用如同virtualenv一样,是用来管理虚拟环境的,配合pyenv主体使用
- window.location="aaa.aspx" 上面的方法只能在当前页打开,如果要在新的页面打开,最简单的是用以下
- 本文实例讲述了PHP简单检测网址是否能够正常打开的方法。分享给大家供大家参考,具体如下:这是一个检测网址是否能正常打开的PHP代码,通过下面
- 包的引入:import numpy as npimport pandas as pd1. Series 对象的创建1.1 创建一个空的 Se
- 随着CSS 框架的流行升温不断,前端er们也越来越关注CSS框架的使用,国内也有很多关于各种CSS框架的使用技巧和教程,彬Go一直关注着各种
- PHP hebrev() 函数实例反向显示希伯来字符:<?php echo hebrev("á çù&
- 安装保证你的用户有权限 安装 没有 切换 rootsu root (su的意思:swich user)# rpm -ivh http://d
- Portable Document Format(可移植文档格式),或者PDF是一种文件格式,可以用于跨操作系统的呈现和文档交换。尽管PDF
- 话不多说,直接上代码import copyimport cv2import numpy as npWIN_NAME = 'draw_
- 数据可视化是以图形格式呈现数据。它通过以简单易懂的格式汇总和呈现大量数据,帮助人们理解数据的重要性,并有助于清晰有效地传达信息。考虑这个给定
- 前言计算机存储数据的方式都是二进制数据,但是我们在mysql中存储的是字符串数据,那么这些数据到底在Mysql中如何存储呢?这就涉及到字符集
- 这篇文章主要介绍了Python读取csv文件实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 本文实例讲述了go语言使用pipe读取子进程标准输出的方法。分享给大家供大家参考。具体如下:其核心代码如下:cmd := exec.Comm