多栏网站制作布局的设计技巧

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

1、两栏自适应布局

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

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

.wrap{background:gray;}.left{float:left;background:orange;}.right{ display:table-cell;_display:block;zoom:1;background:lime;}
  
左侧栏