zoukankan      html  css  js  c++  java
  • DIV左、中、右三列布局的各类情况说明

    一、中间定宽、左、右侧百分比自适应:

      1、HTML代码:

    <div id="left">
        <div id="innerLeft">
            <p>div三列布局的左列</p>
        </div>
    </div>
    <div id="middle">
        <div id="innerMiddle">
            <p>div三列布局的中列</p>
        </div>
    </div>
    <div id="right">
        <div id="innerRight">
            <p>div三列布局的右列</p>
        </div>
    </div>

      2、CSS代码:

    #left,
    #right {
        float: left;
        width: 50%;
        margin: 0 0 0 -150px;
        height: 200px;
    }
    
    #middle {
        float: left;
        width: 300px;
        background: #CCC;
        height: 200px;
    }
    
    #innerLeft,
    #innerRight {
        margin: 0 0 0 150px;
        background: #EFEFEF;
    }

    二、左侧定宽,中、右侧百分比自适应:

      1、HTML代码:

    <div id="left">
        <div id="innerLeft">
            <p>div三列布局的左列</p>
        </div>
    </div>
    <div id="rightContent">
        <div id="middle">
            <div id="innerMiddle">
                <p>div三列布局的中列</p>
            </div>
        </div>
        <div id="right">
            <div id="innerRight">
                <p>div三列布局的右列</p>
            </div>
        </div>
    </div>

      2、CSS代码:

    #left {
        float: left;    
        width: 300px;
        margin: 10px 10px 0 0;
    }
    
    #rightContent {
        margin-left: 300px;
    }
    
    #middle {
        float: left;
        width: 50%;
    }
    
    #right {
        float: left;
        width: 50%;
    }

     三、左、右侧定宽,中间百分比自适应:

      1、HTML代码:

    <div id="left">
        <div id="innerLeft">
            <p>div三列布局的左列</p>
        </div>
    </div>
    <div id="middle">
        <div id="innerMiddle">
            <p>div三列布局的中列</p>
        </div>
    </div>
    <div id="right">
        <div id="innerRight">
            <p>div三列布局的右列</p>
        </div>
    </div>

      2、CSS代码:

    #left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
    }
    
    #middle {
        height: 200px;
        margin-left: 200px;
        margin-right: 200px;
    }
    
    #right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
    }

     四、左、中定宽,右侧百分比自适应:

      1、HTML代码:

    <div id="leftContent">
        <div id="left">
            <div id="innerLeft">
                <p>div三列布局的左列</p>
            </div>
        </div>
        <div id="middle">
            <div id="innerMiddle">
                <p>div三列布局的中列</p>
            </div>
        </div>
    </div>
    <div id="right">
        <div id="innerRight">
            <p>div三列布局的右列</p>
        </div>
    </div>

       2、CSS代码:

    #leftContent {
        float: left;    
        width: 500px;
        height: 200px;
        background: #CCC;
    }
    
    #left,
    #middle {
        float: left;
        width: 50%;
    }
    
    #right {
        margin-left: 500px;
        height: 200px;
    }
  • 相关阅读:
    Android 沉浸式状态栏的三种实现方式
    大数据量高并发访问的数据库优化方法(一)
    Spring Boot实战:集成Swagger2
    JVM学习之GC常用算法
    java并发面试题
    Java面试处理高并发
    jedis操作redis的几种常见方式总结
    彻底理解数据库事物
    Java集合——HashMap、HashTable以及ConCurrentHashMap异同比较
    HashMap的工作原理
  • 原文地址:https://www.cnblogs.com/minozMin/p/8336190.html
Copyright © 2011-2022 走看看