做前端的人肯定会遇到经典的左列固定,右列自适应宽度的样式效果。这种想起来很简单做起来很麻烦的事情今天你有好方案了。
--不要信那些什么左侧写固定宽度,右侧不用写宽度属性和浮动属性,浏览器自动就实现右列自适应的话。亲自试过了,没用 谁愿意可以也试试——谁试谁知道^&^
--更不要为了在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,如需转载请自行联系原作者