zoukankan      html  css  js  c++  java
  • 两列布局方式

    两列布局方式:(使用float之后,一定要给div指定宽度。)

    1、float IE6 有3px偏移 在left上加 margin-left: -100px
    .left{
    background-color: red;
    float: left;
    100px

    }
    .right{
    background-color: green;
    margin-left: 110px

    }

    <div class="content">
    <div class="left">left</div>
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>


    2、float+margin+fix用float:left 和right
    <div class="content">
    <div class="left">left</div>
    <div class="right-flx">
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>
    </div>

    .left{
    background-color: red;
    float: left;
    100px;
    position: relative;

    }
    .right{
    background-color: green;
    margin-left: 100px

    }
    .right-fix{
    background-color: blue;
    float: right;
    100%;
    margin-left: 100px

    }


    3、overflow

    .left{
    background-color: red;
    float: left;
    100px;


    }
    .right{
    background-color: green;
    overflow: hidden;

    }
    <div class="content">
    <div class="left">left</div>
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>

    4、table
    .content{
    display: table;
    100%;
    table-layout: fixed;

    }
    .left,.right{
    display: table-cell;
    }
    .left{
    background-color: red;
    100px;
    }
    .right{
    background-color: green;
    }

    <div class="content">
    <div class="left">left</div>
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>

    5、flex css3
    .content{
    display: flex;

    }

    .left{
    background-color: red;
    100px;
    margin-right: 20px;
    }
    .right{
    background-color: green;
    flex:1;
    }
    <div class="content">
    <div class="left">left</div>
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>


    6 display +position
    .content{
    position: relative;

    }

    .left{
    background-color: red;
    100px;
    display: inline-block;
    }
    .right{
    background-color: green;
    position: absolute;
    left: 110px;
    100%;
    top:0;
    }
    <div class="content">
    <div class="left">left</div>
    <div class="right">
    <p class="e">qqq</p>
    <p>2w</p>
    </div>
    </div>

  • 相关阅读:
    运行monkeyrunner脚本
    Monkey
    ubuntu下在Eclipse中配置MonkeyRunner环境
    ubuntu下Gradle离线安装
    ubuntu下反编译apk
    PuTTY 设置Serial(ubuntu)
    工作中接触的命令
    自动化功能测试(QTP)汉化12.0
    App测试工作
    vue项目在vscode中编译eslint报错没显示红色波浪线提示
  • 原文地址:https://www.cnblogs.com/coding4/p/6240910.html
Copyright © 2011-2022 走看看