浅谈CSS两列自适应布局

laoshu133 HTML/CSS 1评论 Feb 17

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

Tags:CSS HTML 自适应

上一篇：关于我

下一篇：浅谈三列等高自适应布局

共1评论

106说：

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

是的的的

回�?

_米空格

浅谈CSS两列自适应布局

相关文章

共1评论

�?�表评论

最新评论�?�回�?

最近�?�表

网站分类

文章归档

�?�情链接