网页局部的布局技巧:多栏自适应布局问题发布者：本站     时间：2020-05-23 11:05:20

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

1、两栏自适应布局

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

由于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>