等高布局display：table

display：table用法：

父元素：display:table;

子元素：display：table-cell;

注：使用display:table-cell元素部分出现空白缝隙的问题：设置 .cell{line-height: 0;}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <style type="text/css">
            .box{width: 100%;}
            .row{
                display: table;
                width: 100%;
            }
            .cell{
                display: table-cell;
                width: 50%;
                background: #FFFAE8;
                vertical-align: middle;
                 text-align: center;
                 line-height: 0;
            }
            .cell:nth-child(2n){
                background: lavender;
            }
            p{margin-bottom: 30px;}
            img{width: 100%;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="row">
                <div class="cell">
                    <img src="img/1.jpg"/>
                </div>
                <div class="cell">
                    <p>dsjoligjsp</p>
                    <p>dsjoligjsp</p>
                    <p>dsjoligjsp</p>
                </div>
            </div>
        </div>
            
    </body>
</html>

查看全文

相关阅读:
Linux文件和目录管理常用重要命令
 Windows和Linux下Mysql 重置root 密码
 瀑布流vue-waterfall的高度设置
 vue-cli 引入axios及跨域使用
 Vue 脱坑记
 shell基础
 正则
 安装卸载
 压缩打包
 vim工具

原文地址：https://www.cnblogs.com/flower-qh/p/9771279.html