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>
