芒果小站

昨天在项目中遇到的一个 CSS 左右两栏自适应布局问题，做了个简单的演示稿，以作备份。

场景一：文字围绕

这种情况比较普遍，无论左侧容器是否定宽，只需对左侧设置左浮动即可实现文字围绕效果：

float:left;

场景二：右侧往下撑开

如果右侧需要往下撑开，仅仅左侧浮动是不够的，右侧容器需要设置溢出自动：

overflow:auto;

但 IE6 下无效，当然首先想到的是触发 hasLayout，那就简单加个 zoom 属性吧：

zoom:1;

可以发现，左右容器均无预设宽度，这样做的好处是实现了两栏内容的自适应。好了，多说无益，就这样吧。