zoukankan      html  css  js  c++  java
  • 稳定灵活的 HTML 列式布局

    主要特点:

    1. 所有列轻松实现相同高度
    2. 兼容性极高

    ------------------------------------------------ 代码 -----------------------------------------------------

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="cache-control" content="private" />
    <style>
    .col-layout {
    height: 400px; /*布局的原始高度*/
    border-collapse: collapse;
    }

    .col-layout .col {
    padding: 0;
    vertical-align: top;
    }

    .col-layout .left.col {
    background-color: #557175;
    }

    .col-layout .right.col {
    background-color: #635370;
    }

    .col-layout .col-content {
    overflow: hidden;
    }

    .col-layout .left.col .col-content {
    400px; /*列宽度*/
    }

    .col-layout .right.col .col-content {
    600px;
    }
    </style>
    </head>
    <body>
    <table class="col-layout">
    <tr>
    <td class="left col">
    <div class="col-content">
    <!--列的真正内容-->

    <div style="height: 1000px; 2000px; background-color: #83dcbe">Will be hidden</div>
    </div>
    </td>
    <td class="right col">
    <div class="col-content">
    </div>
    </td>
    </tr>
    </table>

    </body>
    </html>

  • 相关阅读:

    创建分区表
    提示 适配器错误
    新手-ios
    web中绝对路径换虚拟路径
    UpdatePanel1里面使用FileUpload控件
    批量将一个表数据导入到另外一个表里面(不同服务器也可以)
    oracle 定时 job
    修改oracle字符集
    Oracle定时备份数据库
  • 原文地址:https://www.cnblogs.com/onlyme/p/5121564.html
Copyright © 2011-2022 走看看