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>

  • 相关阅读:
    2020.10.08 模拟赛 题解
    可爱路径 题解
    飞行路线 题解2
    架设电话线 题解
    浅谈 LCA
    浅谈 Tarjan 算法之强连通分量(危
    初赛题目整理1
    【求助,待续!】holes
    【题解】HDU4467
    【题解】zhx154嬲
  • 原文地址:https://www.cnblogs.com/onlyme/p/5121564.html
Copyright © 2011-2022 走看看