<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>三行自动等高</title> <style type="text/css"> *{margin: 0;padding: 0;} body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;} .main {overflow: hidden;width: 800px;margin: 0 auto;} .left {float: left;width: 250px;overflow: hidden;} .center {float:left;margin-left:5px;width:295px;} .right {float: right;width: 245px;overflow: hidden;} .bor_top {height:1px;background:#FB9D51;overflow:hidden;} .equal {padding-bottom: 32767px;margin-bottom: -32767px;} .box {background: #F5E2AF;border: 1px #FB9D51 solid;padding-left:10px;padding-right:10px;} .mt5 {margin-top: 5px;}</style> </head> <body> <div class="main"> <div class="left equal"> <div class="box"><p>阅谁问君诵,水落清香浮</p></div> <div class="box mt5"><p>阅谁问君诵,水落清香浮</p></div> <div class="box mt5"><p>阅谁问君诵,水落清香浮</p></div> <div class="equal mt5 box"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> </div> <div class="center equal"> <div class="box"> <p><p>阅谁问君诵,水落清香浮</p></p> </div> <div class="box mt5"> <p><p>阅谁问君诵,水落清香浮</p></p> </div> <div class="box mt5"> <p><p>阅谁问君诵,水落清香浮</p></p> </div> <div class="equal mt5 box"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> </div> <div class="equal right"> <div class="box"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> <div class="box mt5"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> <div class="box mt5"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> <div class="equal mt5 box"> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> <p>阅谁问君诵,水落清香浮</p> </div> </div> </div> </body> </html>
主要样式
overflow: hidden; padding-bottom: 32767px; margin-bottom: -32767px;
效果图: