_米空格

很久很久没更新网站了，再不写写都差不多忘记自己还有个小站可以记录，作为小站的开篇文章，其实我想了很久了，到底应该写篇什么文章，最后还是敲定了这篇关于自适应布局的文章，因为前段时间帮一朋友写过这个类似的，当时因为结构有点复杂，脑袋也有点堵得慌，最后居然还是用JS解决问题的 -_-|||。

废话不说，切入正题：

目前我发现三种比较适用的方法，

1. 传统的左侧浮动，右侧利用margin-left实现自适应，DEMO
   

   此方法应该是目前应用最多的一种，因为实现是很简单的，但也有缺点，比如存在IE6 3px bug，而且在IE6,7中当浏览器宽度过小时右侧会下沉

2. 左侧绝对定位，右侧依然利用margin-left实现自适应，DEMO
   

   使用此方法可以有效避免IE6 3px bug和右侧下沉的问题

3. 利用hasLayout，实现在不知道左侧宽度的情况下实现右侧自适应，DEMO
   

   此方法利用hasLayout实现自适应，原理我也不是很明白，但是方法也有缺点，左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug

另外网上也还有一种左侧浮动右侧绝对定位的方法，原理和左侧绝对定位差不多，而且会出现IE6下无法撑开右侧的问题；看了前面的几种方法，我相信都会有我们自己的选择了，我个人觉得左侧绝对定位，右侧margin-left实现应该是目前来讲比较使用的一种。

---------------------2011.03.21更新------------------------

对于“在IE6,7中当浏览器宽度过小时右侧会下沉”其实主要都是由于文本换行所引起的，只要添加 word-break:break-all;就可解决此类问题。 DEMO