浅谈CSS两列自适应布局 - 凡事预则立,不预则废

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

1评论

  1. 是的的 的

    回复

发表评论

最新评论及回复

    loading

最近发表

    loading

网站分类

    loading

文章归档

    loading

友情链接

Top Comments Footer