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

最新推荐文章于 2021-12-27 09:06:09 发布

weixin_33939380

最新推荐文章于 2021-12-27 09:06:09 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/JimmyBright/p/6418889.html

版权

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

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

转载于:https://www.cnblogs.com/JimmyBright/p/6418889.html

weixin_33939380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格式布局让每个列高度等于该行最大高度

通常横向布局时采用float浮动布局<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> .left, .right { ...
复制链接

扫一扫