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

    中栏固定宽度,左右两栏宽度自适应

    <style>
    *{
    margin:0;
    padding:0;
    }
    body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    min-620px;
    }

    #left{
    float:left;
    50%;
    height:400px;
    background:#ccc;
    margin-left:-150px;
    }
    #right{
    float:right;
    50%;
    height:400px;
    background:#ccc;
    margin-right:-150px;
    }
    #middle{
    float:left;
    300px;
    height:400px;
    background-color:#666;
    }

    </style>

    </head>

    <body>
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>

    </body>
    </html>

    中栏自适应宽度,左右两栏宽度固定

    <style>
    *{
    margin:0;
    padding:0;
    }
    body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    min-620px;
    }

    #left{
    float:left;
    200px;
    height:400px;
    background:#ccc;

    }
    #right{
    float:right;
    200px;
    height:400px;
    background:#ccc;

    }
    #middle{
    margin-left:200px;

    margin-right:200px;
    height:400px;
    background-color:#666;
    }

    </style>

    </head>

    <body>
    <div id="left"></div>
    <div id="right"></div>

    <div id="middle"></div>

    </body>
    </html>

  • 相关阅读:
    Hdu 4496 D-City
    Hdu 1213 How Many Tables
    T1387:搭配购买(buy)
    codevs 2597 团伙
    Hdu 1232 畅通工程
    RQNOJ PID331 家族
    提高组day4
    xjoi2018提高组训训练25
    关于upp和lower
    矩阵快速幂求fib
  • 原文地址:https://www.cnblogs.com/qinxuemei/p/3980095.html
Copyright © 2011-2022 走看看