1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin:0;padding:0} 8 ul{display:table;table-layout: fixed;width:100%; 9 height: 200px;padding:20px;-webkit-box-sizing: border-box } 10 li{display:table-cell;background:#f45;word-wrap:break-word;padding:20px} 11 div{background:#f0f;height:100%;width:100%} 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li>11111111111111111111111111111111111</li> 17 <li><div>2</div></li> 18 <li><div>2</div></li> 19 <li><div>2</div></li> 20 <li><div>2</div></li> 21 <li><div>2</div></li> 22 </ul> 23 <script> 24 25 </script> 26 <!--父元素可以使用margin和padding，子元素不能用margin;但是可以用padding--> 27 </body> 28 </html>
display的table和cell外加table-layout:fixed等分布局，外加换行，word-wrap:break-word
原文：http://www.cnblogs.com/suoking/p/4955786.html