```css .container { display: flex; } .left { width: 200px; } .right { flex-grow: 1; } ```

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS代码

解析：需要生成一个CSS代码，实现左侧固定宽度，右侧随浏览器自适应宽度的效果。 代码如下： ```css .container { display: flex; } .left-side { width: 200px; } .right-side { flex-grow: 1; } ```

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

左边固定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;}

相关专题