网页局部的布局技巧:多栏自适应布局问题
在网页局部的布局上,需要采用大量的自适应,来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因,导致重叠、溢出、撑开等破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的自适应问题。 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 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 众所周知,HTML文档是顺序解析的。在这张使用 WebPageTest 对 Amazon 首页 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |