有时候元素的高度是内容填充的，不能再css直接定义，但是如果高度不统一外观又不太好看，那么我们只能通过JS对
元素的高度进行控制了，本例子是通过jQuery对元素高度进行控制的，所以首先要引入jQuery文件。
附上代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取相同元素的最大高度</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> html,body,div,ul,li p{ margin: 0px; padding: 0px; font-size: 14px; } .wrap{ width: 600px; margin: 50px auto; } .wrap ul{ width: 100%; list-style: none; overflow: hidden; } .wrap ul li{ float: left; width: 32%; margin: 0 0.5%; padding: 20px 0px 30px; border: 1px solid #EEEEEE; } .wrap ul li p{ margin:0 10px } .wrap ul li p:first-child{ font-size: 16px; line-height: 2; text-align: center; } </style> </head> <body> <div class="wrap"> <ul> <li> <p>标题一</p> <p>内容一内容一内容一内容一内容一内容一</p> </li> <li> <p>标题二</p> <p>内容二内容二内容二内容二内容二</p> </li> <li> <p>标题三</p> <p>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</p> <p>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</p> </li> </ul> </div> <script type="text/javascript"> $(function(){ $(function(){ var arr=[]; for(var i=0;i<$('.wrap ul li').length;i++){ arr.push($('.wrap ul li')[i].offsetHeight); } arr.sort(function(value1,value2){//排序 return value2-value1; }); $('.wrap ul li').height(arr[0]); }); }); </script> </body> </html>