很久很久没更新网站了,再不写写都差不多忘记自己还有个小站可以记录,作为小站的开篇文章,其实我想了很久了,到底应该写篇什么文章,最后还是敲定了这篇关于自适应布局的文章,因为前段时间帮一朋友写过这个类似的,当时因为结构有点复杂,脑袋也有点堵得慌,最后居然还是用JS解决问题的 -_-|||。
废话不说,切入正题:
目前我发现三种比较适用的方法,
- 传统的左侧浮动,右侧利用margin-left实现自适应,DEMO
此方法应该是目前应用最多的一种,因为实现是很简单的,但也有缺点,比如存在IE6 3px bug,而且在IE6,7中当浏览器宽度过小时右侧会下沉
- 左侧绝对定位,右侧依然利用margin-left实现自适应,DEMO
使用此方法可以有效避免IE6 3px bug和右侧下沉的问题
- 利用hasLayout,实现在不知道左侧宽度的情况下实现右侧自适应,DEMO
此方法利用hasLayout实现自适应,原理我也不是很明白,但是方法也有缺点,左侧宽度不会计算边框宽度,在非FF的浏览器中宽度过小时会出现右侧下沉,而且同样会有IE6 3px bug
另外网上也还有一种左侧浮动右侧绝对定位的方法,原理和左侧绝对定位差不多,而且会出现IE6下无法撑开右侧的问题;看了前面的几种方法,我相信都会有我们自己的选择了,我个人觉得左侧绝对定位,右侧margin-left实现应该是目前来讲比较使用的一种。
---------------------2011.03.21更新------------------------
对于“在IE6,7中当浏览器宽度过小时右侧会下沉”其实主要都是由于文本换行所引起的,只要添加 word-break:break-all;就可解决此类问题。 DEMO
上一篇:关于我
下一篇:浅谈三列等高自适应布局
共1评论
106说:
于 2011-3-21 10:17:04 #
是的的 的
回复