zoukankan      html  css  js  c++  java

  • 三行二列居中高度自适应布局

    <html>
    <head>
    <style type="text/css">
    body    {
    background    :#999;
    text-align    :center;
    color    : #333;
    font-family    :arial,verdana,sans-serif;
    }
    #header    {
    width    :776px;
    margin-right    : auto;
    margin-left    : auto; 
    padding    : 0px;
    background    : #EEE;
    height    :60px;
    text-align    :left;
    }
    #contain    {
        margin-right    : auto;
        margin-left    : auto;
        width    : 776px;
    }
    #mainbg    {
        width    :776px;
        padding    : 0px;
        background    : #60A179;
        float    : left;
    }

    #right    {
    float    : right; 
    margin    : 2px 0px 2px 0px; 
    padding    :0px; 
    width    : 574px; 
    background    : #ccd2de;
    text-align    :left;
    }
    #left    {
    float    : left; 
    margin    : 2px 2px 0px 0px; 
    padding    : 0px; 
    background    : #F2F3F7; 
    width    : 200px;
    text-align    :left;
    }
    #footer    {
    clear    :both;
    width    :776px;
    margin-right    : auto;
    margin-left    : auto; 
    padding    : 0px;
    background    : #EEE;
    height    :60px;}
    .text    {margin:0px;padding:20px;}
    </style>
    </head>
    <body>
    <div id="header">header</div>
    <div id="contain">
    <div id="mainbg">
             <div id="right">
                   <div class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
             </div>
             <div id="left">
                   <div class="text">left</div>
             </div>
    </div>
    </div>
    <div id="footer">footer</div>

    </body>
    </html>
  • 相关阅读:
    bzoj1453
    276D
    855E
    bzoj1458
    树莓派 自启动连接阿里云物联网平台（一）
    树莓派 实现脚本程序自启动
    树莓派4B 系统镜像安装与boot配置
    2019-2020-2《网络对抗技术》 Exp1 PC平台逆向破解
    2019-2020-2 《网络对抗技术》 Exp0 kali 安装
    kali 添加使用 KDE 桌面环境
  • 原文地址：https://www.cnblogs.com/liuweitoo/p/934586.html
Copyright © 2011-2022 走看看