左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

左侧固定宽度，右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。

左边固定200PX，右侧宽度随浏览器缩放自动调整大小，我的站长站分享几种实现方法，代码尽量精简，只留关键代码。

方法1、左浮动，右margin-left

比较推荐的方法，兼容性高，代码也最简单好理解。

   .left{
        float: left;
        width: 200px;
    }
    .right{
        margin-left:200px;
        word-break: break-all;
    }

方法2、左浮动，右边overflow

这种方法IE6下不兼容

left{
       float: left;
       width: 200px;
   }
   .right{
       overflow: hidden;
       word-break: break-all;
   }

方法3、左绝对定位，右margin-left

.left{
       position: absolute;
       top: 0;
       left: 0;
       width: 200px;
   }
   .right{
       margin-left:200px;
       word-break: break-all;
   }

方法4、左右都用绝对定位

.left{
       position: absolute;
       top: 0;
       left: 0;
       width: 200px;
   }
   .right{
       position: absolute;
       left: 200px;
       top:0;
       word-break: break-all;
   }