沫沫金：2014最新全浏览器兼容左列固定右列自适应宽度技巧大公开-优快云博客

本文介绍一种简单有效的布局方案，实现左列固定宽度、右列自适应宽度的效果。通过将左列置于右列内部的方式，巧妙地解决了传统方法中存在的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

重点看下面的div结构

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

仔细对比你就会发现，只需要让left层放到right层里面就OK了，搞定

本文转自沫沫金 51CTO博客，原文链接：http://blog.51cto.com/zl0828/1371923，如需转载请自行联系原作者