且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2021-09-12 07:31:57

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


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


--更不要为了在css中实现右列自动获取宽度值而使用“expression()”,不想吐槽后期谁维护谁知道——造孽呀!


正文来了:最新的组合实现左列固定宽度右列宽度自适应方案如下


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

重点看下面的div结构

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

仔细对比你就会发现,只需要让left层放到right层里面就OK了,搞定沫沫金:2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开(欢迎大家添加 976 465 669 本人的QQ交流最新最流行的技术和项目工作互换)本人在古都西安