css教程

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

我的站长站 2022-10-30 人阅读

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

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

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

相关推荐
  • CSS代码
  • 左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

    左侧固定宽度,右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。左边固定200PX,右侧宽度随浏览器缩放自动调整大小,我的站长站分享几种实现方法,代码尽量精简,只留关键代码。方法1、左浮动,右margin-left比较推荐的方法,兼容性高,代码也...

    css教程 40 1年前
  • css3海浪波浪动态效果代码

    HTML代码建立一个div,id为wavesDIV,之后使用svg绘制一个图形出来,此时这个图形还是不会懂的,我们需要使用animation来让他动起来<div id="wavesDIV" style="display: block;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlin...

    css教程 83 2年前
  • CSS+JS简单的底部浮动搜索框效果代码

    一段CSS+JS简单的底部浮动搜索框效果代码,实现PC移动端底部浮悬代码。CSS代码<style type="text/css">* {margin:0px; padiing:0px;}.login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}.login_alert_close{position:absolut...

    css教程 133 3年前
最新更新