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>

  • 相关阅读:
    comparator接口与Comparable接口的区别
    heap和stack有什么区别
    聚集索引和非聚集索引(整理)
    SQL里的EXISTS与in、not exists与not in
    SQL中CONVERT转化函数的用法
    GCC 对C语言的扩展
    C++宏定义详解
    How to Find Processlist Thread id in gdb !!!!!GDB 使用
    Netdata----Linux 性能实时监测工具
    java开发C语言编译器
  • 原文地址:https://www.cnblogs.com/coding4/p/6240910.html
Copyright © 2011-2022 走看看