沫沫金:2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
生活随笔
收集整理的這篇文章主要介紹了
沫沫金:2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
做前端的人肯定會遇到經(jīng)典的左列固定,右列自適應寬度的樣式效果。這種想起來很簡單做起來很麻煩的事情今天你有好方案了。
--不要信那些什么左側(cè)寫固定寬度,右側(cè)不用寫寬度屬性和浮動屬性,瀏覽器自動就實現(xiàn)右列自適應的話。親自試過了,沒用 誰愿意可以也試試——誰試誰知道^&^
--更不要為了在css中實現(xiàn)右列自動獲取寬度值而使用“expression()”,不想吐槽后期誰維護誰知道——造孽呀!
正文來了:最新的組合實現(xiàn)左列固定寬度右列寬度自適應方案如下
| 1 2 3 4 5 6 7 8 | .left{ ????width:546px; ????height:91px; } .right{ ????width:100%; ????height:91px; } |
重點看下面的div結(jié)構(gòu)
| 1 2 3 | <div class="right"> ????<div class="left"></div> </div> |
仔細對比你就會發(fā)現(xiàn),只需要讓left層放到right層里面就OK了,搞定
本文轉(zhuǎn)自 沫沫金 51CTO博客,原文鏈接:http://blog.51cto.com/zl0828/1371923,如需轉(zhuǎn)載請自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的沫沫金:2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 企业证书系列之数据加密
- 下一篇: HTML5 移动页面自适应手机屏幕四类方