浅谈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