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

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

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

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

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

1 2 3 4 5 6 7 8

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

方法2、左浮动，右边overflow

这种方法IE6下不兼容

1 2 3 4 5 6 7 8

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

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

1 2 3 4 5 6 7 8 9 10

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

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

1 2 3 4 5 6 7 8 9 10 11 12

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