表格式佈局讓每個列高度等於該行最大高度

流火行者發表於2017-02-20

通常橫向佈局時採用float浮動佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left,
        .right {
            float: left;            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="left">
    left div
    <br/>
    left div
    <br/>
    left div
    <br/>
    <br/>
    <br/>
</div>
<div class="right">
    right div
</div>
</body>
</html>

顯示佈局結果：

右側的div高度只是適應了內容，往往需要的是右側高度能自動撐到該行最大高度，就是說右側高度和左側高度要保持一致

通過table佈局很容易做到這個，在table裡，每行的高度會自動撐到該行最大高度，也可以用table-cell，這樣至少我們可以少寫幾個table的標籤

html如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .left,
        .right {
            /*float: left;*/
            display: table-cell;
            border: 1px solid #f40;
        }
    </style>
</head>
<body>
<div class="left">
    left div
    <br/>
    left div
    <br/>
    left div
    <br/>
    <br/>
    <br/>
</div>
<div class="right">
    right div
</div>
</body>
</html>

顯示結果就是我們想要的了：

相關文章