网页局部的布局技巧:多栏自适应布局问题
渲染过程的某一时刻截图中,可以发现左右两侧的内容率先予以呈现,而主体部分会造成一定时间的空白。因此这种方案并不宜用于整站页面框架的搭建。
考虑到页面结构的复杂程度和体积大小,大型站点的布局方案,个人倾向于采用诸如负边距之类自适应布局。实现原理可以参考《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 3、自适应栅格化布局Object-oriented CSS 提出了一种结构化的多栏自适应布局,利用栅格控制容器宽度,内容控制容器高度。使得多层嵌套的自适应栅格化布局清晰明了。如果应用到类似表格的页面排版,这种方法行之有效。详细参考自适应栅格化布局代码示例:grid_layout.html |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |