左侧固定宽度,右侧随浏览器自适应宽度的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;
   }

相关专题

浏览器

2023-09-15 19

浏览器是日常必备工具,学会使用浏览器也是必须技能.首先浏览器分很多种,选择一款合适自己的浏览器下载是首要任务,浏览器的各种使用安装方法也是必看课程,也整理...

• 浏览器如何模拟测试不同分辨率的网页效果 [2023-09-15]
• statcounter全球浏览器市场份额统计工具 [2023-09-15]
• TabCopy网站名称+网址快速批量复制谷歌浏览器插件V3.5 [2023-09-03]
• 服务器自带IE浏览器提示添加网址到受信任站点取消方法 [2023-08-29]
• 谷歌浏览器右键翻译失效修复工具 [2023-07-11]