2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开

简介:

做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果。这种想起来很简单做起来很麻烦的事情今天你有好方案了。


--不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列自适应的话。亲自试过了,没用 谁愿意可以也试试——谁试谁知道^&^


--更不要为了在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,如需转载请自行联系原作者

相关文章
selenium--设置浏览器的位置和高度宽度
selenium--设置浏览器的位置和高度宽度
|
Web App开发 前端开发
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
476 0
css:浏览器滚动条出现时页面宽度会缩窄页面抖动
|
JavaScript 前端开发
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
97 0
关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题
|
前端开发
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
120 0
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
获取浏览器窗口高度和宽度兼容IE
获取浏览器窗口高度和宽度兼容IE
129 0
让span对宽度有响应而且兼容多种浏览器
span {display:-moz-inline-box; display:inline-block; width:20px;height:20px;}  学习交流群:364976091
982 0