快速业务通道

网页局部的布局技巧:多栏自适应布局问题

作者 凌众技术 来源 网页制作 浏览 发布时间 2012-03-08

在网页局部的布局上,需要采用大量的自适应,来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因,导致重叠、溢出、撑开等破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的自适应问题。

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 首页

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号