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>

  • 相关阅读:
    简单的冒泡排序算法(java)
    寻找两个数组中的公共元素Java程序代码
    利用快速排序求两集合交集
    一种简单的吉布斯采样modify中应用
    递归生成小于某个数的所有集合
    卡拉曼算法简答程序
    模态对话框退出DoModal过程中需注意的陷阱
    是否可以使用空对象指针调用成员函数及访问成员变量
    windows c++如何使窗口动态改变位置
    windows的滚动条使用
  • 原文地址:https://www.cnblogs.com/coding4/p/6240910.html
Copyright © 2011-2022 走看看