多栏自适应布局问题

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

1、两栏自适应布局 在实际项目中，常常遇到如红色线框部分的两栏自适应问题。其关键点是，左右两栏均不定宽，右侧栏条目数量不定。

针对这种场景，可以采用两栏均浮动的方法。参考 Object-oriented CSS 中应用到的布局方案，则需要套用两层标签实现，两栏中一栏浮动，另一栏宽度自适应：

.wrap{background:gray;} .left{float:left;background:orange;} .right{ display:table-cell;_display:block;zoom:1;background:lime;} <div>   <div>左侧栏</div>   <div>右侧栏</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>   <div>左侧栏</div>   <div>右侧栏</div>   <div>主体部分</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>   <div>     <div>       <div>         <div>主体部分</div>       </div>       <div>左侧栏</div>     </div>   </div>   <div>右侧栏</div> </div>点此查看该代码示例：negative_margin_layout.html 虽然实现上要比其他方案更为复杂，需要嵌套多层标签，在一定程度上有失 HTML 文档的简洁性。但一个重要的好处是，其各个区块（左侧栏、主体部分、右侧栏）文档结构顺序可以随意调换，而在视觉呈现上却没有任何差异。目前口碑网的前端布局系统正是应用了这种解决方案，并有专用工具实现布局框架的自动化生成。

3、自适应栅格化布局 Object-oriented CSS 提出了一种结构化的多栏自适应布局，利用栅格控制容器宽度，内容控制容器高度。使得多层嵌套的自适应栅格化布局清晰明了。如果应用到类似表格的页面排版，这种方法行之有效。详细参考自适应栅格化布局代码示例：grid_layout.html 而目前大量的网站正在使用 950px/960px 宽度的栅格系统，固定最小栅格单元的宽度，保证整体结构的合理、稳定和一致。与其相比，在局部页面布局中，建议使用 Object-oriented CSS 这种简洁的、基于百分比的栅格方案。如果可以保证内部所有区块自适应，就只需要对最外层容器设定宽度，显得更为灵活。

网站标题：多栏自适应布局问题
地址分享：https://www.cdcxhl.com/news27/315827.html

成都网站建设公司_创新互联，为您提供网站制作、Google、搜索引擎优化、品牌网站制作、静态网站、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联