zoukankan      html  css  js  c++  java
  • 常见自适应布局

    常见自适应布局

    <div class="box">
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
    

    左侧固定宽度,右侧自适应布局

    方法一:

    左侧盒子使用float浮动,固定宽度,右侧盒子设置margin-left控制与左侧的距离:

    .left{
         200px;
        float: left;
        background-color: skyblue;
    }
    .right{
        background-color: yellow;
        margin-left: 200px;
    }
    

    方法二:

    左侧盒子使用绝对定位absolute;固定宽度,右侧盒子设置margin-left控制与左侧的距离:

    .left{
         200px;
        background-color: skyblue;
        position: absolute;
        left: 0;
    }
    .right{
        background-color: yellow;
        margin-left: 200px;
    }
    

    左侧自适应,右侧固定宽度

    方法一:

    左侧盒子左浮动,margin-right为负值,值为右边距==右侧层的宽度的负值(左侧撑开,使得两个盒子共行), 右侧盒子右浮动,固定宽度

    .left{
        float: left;
        background-color: skyblue;
        margin-right: -200px;
         100%;
    }
    .right{
         200px;
        float: right;
        background-color: yellow;
    }
    

    方法二:

    左侧右侧都使用绝对定位,右侧固定宽度,父级设置相对定位:

    .box{
        position: relative;
    }
    .left{
        position: absolute;
        left: 0;
        right: 200px;
         auto;
        background-color: skyblue;
    }
    .right{
         200px;
        position: absolute;
        right: 0;
        background-color: yellow;
    }
    

    左右两侧宽度固定,中间自适应

    <div class="box">
        <div class="center"></div>
    	<div class="left"></div>
    	<div class="right"></div>
    </div>
    
    .left,.center,.right{
        float: left;
    }
    .center{
         100%;
        background-color: greenyellow;
    }
    .left{
         200px;
        background-color: skyblue;
        margin-left: -100%;
    }
    .right{
         300px;
        margin-left: -300px;
        background-color: yellow;
    }
    
  • 相关阅读:
    误加all_load引起的程序报错
    ConstraintLayout 约束布局
    前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想
    TP5 多条件whereOr查询
    json手动解析详解
    Centos python 2.6 升级到 2.7
    js中click重复执行
    使用 Python 实现实用小工具
    使用 Python 编写密码爆破工具
    使用Python进行无线网络攻击
  • 原文地址:https://www.cnblogs.com/actorhuang/p/13882281.html
Copyright © 2011-2022 走看看