表格式布局让每个列高度等于该行最大高度

通常横向布局时采用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>

显示结果就是我们想要的了：

posted @ 2017-02-20 11:57  流火行者  阅读(189)  评论(0)  编辑  收藏  举报