display:table佈局總結

看風景就發表於2017-10-22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*CSS Table*/
        .table { display: table; }
        .table-fixed { table-layout: fixed; }
        .table-row { display: table-row; }
        .table-cell { display: table-cell; }
        .table-colgroup { display: table-column-group; }
        .table-caption { display: table-caption; }
        .table-col { display: table-column; }
        .table-body { display: table-row-group; }
        .table-header { display: table-header-group; }
        .table-footer { display: table-footer-group; }
        .table-vt { vertical-align: top; }
        .table-vm { vertical-align: middle; }
        .table-vb { vertical-align: bottom; }
        /*CSS Table*/
        html,
        body { height: 100%;margin: 0; padding: 0; background: #333;}
        div.demo1 { width: 100%;height: 200px; }
        .box1 { background: #6D5CAE; }
        .box2 { background: #48B0F7; }
        .box3 { background: #10CFBD; }
        h3 { padding-left: 20px;color: #fff; }
        .demo2 { width: 400px;height: 300px;}
        .demo2 div.table-header-group {padding: 5px 20px;background: #10CFBD;}
        .demo2 .main {height: 100%;background: #48B0F7;}
        .demo2 div.table-footer-group {padding: 5px 20px;background: #10CFBD;}
        .demo3 {width: 400px;height: 300px;background: #10CFBD;}
        .demo4 {width: 400px;height: 300px;background: #10CFBD;text-align: center;}
        .center-box {width: 100px;height:100px;background: #6D5CAE;display: inline-block;}
        .header{font-size:30px;}
    </style>
</head>

<body>
    <h3>響應式佈局</h3>
    <div class="table demo1">
        <div class="box1 table-cell">1</div>
        <div class="box2 table-cell">2</div>
        <div class="box3 table-cell">3</div>
    </div>

    <h3>自動佔滿剩餘空間</h3>
    <div class="table demo2">
        <div class="header table-header-group">Table Header</div>
        <div class="main table-row">自動佔滿剩餘空間</div>
        <div class="table-footer-group">Table Footer</div>
    </div>

    <h3>動態垂直居中對齊</h3>
    <div class="table demo3">
        <div class="table-cell table-vm">
            <div class="center-box">123</div>
        </div>
    </div>

    <h3>動態水平居中對齊</h3>
    <div class="demo4" style="text-align:left;">
        <div class="table" style="margin:0 auto">
            <div class="center-box">123</div>
        </div>
    </div>

    <h3>動態水平居中對齊2</h3>
    <div class="demo4" style="text-align:left;">
        <span class="center-box table" style="margin:0 auto">123345678</span>
    </div>
</body>

</html>

 

出處：http://ghmagical.com/article/page/id/s1x7vzL6Z2Sz

相關文章