使用css实现并列div高度随动

最新推荐文章于 2021-08-03 21:05:32 发布

weixin_30795127

最新推荐文章于 2021-08-03 21:05:32 发布

阅读量176

点赞数

原文链接：http://www.cnblogs.com/wen-wen/p/5168580.html

版权

1.写出基本的html结构和css样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV高度自适应</title>
    <style>
        .container{   
　　　　　　　display:table;         
            width:900px;
            min-height:300px;
            margin: 100px auto;
            background-color:#ccc;
        }
        .col{            
　　　　　　　display:table-cell;
            text-align:center;
            width:300px;            
            top:0;
            bottom:0;            
            font-size:50px;
        }
        .col1{
            background-color:#369;            
        }
        .col2{
            background-color:#963;            
        }
        .col3{
            background-color:#936;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col col1">1</div>
        <div class="col col2">2</div>
        <div class="col col3">3</div>
    </div>
</body>
</html>

当1,2,3中任意一个高度变化的时候，会影响其他两个，先在1中添加几个p标签做一下实验来证实

<div class="col col1">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>

这个关键在于将container的display设置为table，将col的display设置为table-cell，就可以实现向table里面各个td高度一致的的效果，方法简单有效，比我以前使用的要好得多

点击查看demo http://codepen.io/Ritr/pen/MKGMog

转载于:https://www.cnblogs.com/wen-wen/p/5168580.html

weixin_30795127

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用css实现并列div高度随动

1.写出基本的html结构和css样式<html lang="en"><head> <meta charset="UTF-8"> <title>DIV高度自适应</title> <style> .container{ 　　　　　　　display:table; ...
复制链接

扫一扫