zoukankan      html  css  js  c++  java
  • css三栏布局

    这里自己总结2个比较容易的方法。

    1、定位法
    <div class="left">左</div>
    <div class="main">中</div>
    <div class="right">右</div>
    
    *{
            margin:0;
            padding:0;
            height:100%;
        }
        .left,.right{
            position:absolute;
            top:0;
            background-color:green;
            height:100%;
        }
        .left{
            left:0;
            100px;
        }
        .right{
            right:0;
            200px;
        }
        .main{
            margin:0 200px 0 100px;
            height:100%;
            background-color:blue;
        }
    

     2、浮动法

    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div> //注意中间部分的位置 如果把div放在中间 浮动上不去
     *{
            margin:0;
            padding:0;
            height:100%;
        }
        .left{
            background-color:green;
            float:left;
            width:100px;
            height:100%;
        }
        .right{
            background-color:green;
            float:right;
            width:200px;
            height:100%;
        }
        .main{
            margin:0 200px 0 100px;
            height:100%;
            background-color:blue;
    
        }
  • 相关阅读:
    文件的基本操作
    ps工作界面
    HDU 6300
    HDU 6298
    HDU 2037
    HDU 2036
    Tesseract OCR
    What is the difference between position: static,relative,absolute,fixed
    How to Call a synchronize function asynchronizly in C#
    WCF note1
  • 原文地址:https://www.cnblogs.com/nf1206/p/6880065.html
Copyright © 2011-2022 走看看