浅谈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. 106说:

    于 2011-3-21 10:17:04 #

    Gravatar Icon

    是的的 的

    回�

�表评论

  • [URL] [URL2] [EMAIL] [QUOTE] UBB表情 [B] [I] [S] [U]

最新评论�回�

    loading

最近�表

    loading

网站分类

    loading

文章归档

    loading

�情链接

Top Comments Footer