zoukankan      html  css  js  c++  java
  • 经典布局:左固定,右边自适应

    自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!

     
    页面布局如下:
    左边固定,右边自适应及左边自适应,右边固定布局的几种方法
     
    一、左边固定,右边自适应的布局
     
    1. 左边左浮动,右边加个overflow:hidden;
       #lt{ float: left;200px; background: #ff0;}
       #rt{ overflow: hidden; background: #f0f;}
     
    2. 左边左浮动,右边加个margin-left;
     
       #lt{ float: left; 200px; background: #ff0;}
       #rt{ margin-left: 200px; background: #f0f;}
     
     
    3. 左边绝对定位,右边加个margin-left;
     
       #lt{ position: absolute; top:0; left:0; 200px; background: #ff0;}
       #rt{ margin-left: 200px; background: #f0f;}
     
     
    4. 左右两边绝对定位,右边加个width,top,left,right
     
       #lt{ position: absolute; top:0 ; left:0 ;200px; background: #ff0;}
       #rt{ position: absolute; top:0 ; left:200px; 100% ; rigth:0;background: #f0f;}
     
     
    效果图如下:
    左边固定,右边自适应及左边自适应,右边固定布局的几种方法

    二、右边固定,左边自适应的布局
     
    1. 左边左浮动,margin-left负值,右边右浮动;
     
       #lt{float:left; 100%;background: #00f;margin-right: -200px;}
       #rt{float: right; 200px;background: #ff0;}
     
     
    2. 右边绝对定位,左边margin-right;
     
       #lt{margin-right:200px; background: #00f;}
       #rt{ position: absolute; right:0; top:0; 200px;background: #ff0;}
     
     
    3. 左右两边绝对定位,左边加个width,top,left,right
     
       #lt{ position: absolute; top:0; left:0; rigth:0;  100% ; background: #f0f;}
       #rt{ position: absolute; top:0; left:200px; 200px; background: #ff0;}
     
     
    效果图如下:

    左边固定,右边自适应及左边自适应,右边固定布局的几种方法

     
    上面的方法在各浏览器的测试中,都能兼容!
  • 相关阅读:
    解决object at 0x01DB75F0
    github导入文件操作
    git出现: not a git repository
    scrapy框架爬取妹子图片
    mysql触发器,视图,游标
    mysql锁
    在k-means或kNN,我们是用欧氏距离来计算最近的邻居之间的距离。为什么不用曼哈顿距离?
    数据库存储,索引,事务常见问题
    使用Request+正则抓取猫眼电影(常见问题)
    Tensorflow()
  • 原文地址:https://www.cnblogs.com/gs97/p/7066743.html
Copyright © 2011-2022 走看看