做前端的人肯定會遇到經典的左列固定，右列自適應寬度的樣式效果。這種想起來很簡單做起來很麻煩的事情今天你有好方案了。

--不要信那些什么左側寫固定寬度，右側不用寫寬度屬性和浮動屬性，瀏覽器自動就實現右列自適應的話。親自試過了，沒用 誰愿意可以也試試——誰試誰知道^&^

--更不要為了在css中實現右列自動獲取寬度值而使用“expression()”，不想吐槽后期誰維護誰知道——造孽呀！

正文來了：最新的組合實現左列固定寬度右列寬度自適應方案如下

1 2 3 4 5 6 7 8

.left{ ????width:546px; ????height:91px; } .right{ ????width:100%; ????height:91px; }

重點看下面的div結構

1 2 3

<div class="right"> ????<div class="left"></div> </div>

仔細對比你就會發現，只需要讓left層放到right層里面就OK了，搞定

本文轉自 沫沫金 51CTO博客，原文鏈接：http://blog.51cto.com/zl0828/1371923，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。