1 2 3 <!DOCTYPE HTML> 4 <html> 5 <head> 6 <title>文本两端对齐 by hongchenok</title> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <style> 9 .box{ 10 width:50%; 11 padding:20px; 12 margin:20px auto; 13 background-color:#f0f3f9; 14 text-align:justify; 15 text-justify:distribute-all-lines;/*ie6-8*/ 16 } 17 .list{ 18 width:120px; 19 display:inline-block; 20 *display: inline; 21 *zoom:1; 22 padding-bottom:20px; 23 text-align:center; 24 vertical-align:top; 25 } 26 .justify_fix{ 27 display:inline-block; 28 *display: inline; 29 *zoom:1; width:100%; 30 height:0; 31 overflow:hidden; 32 } 33 34 .list_head{ 35 height: 50px; 36 width: 50px; 37 background-color: red; 38 float: left; 39 } 40 41 .list_content{ 42 width: 70px; 43 height: 50px; 44 float: left; 45 } 46 .clearfix:after { 47 content: "."; 48 display: block; 49 height: 0; 50 clear: both; 51 visibility: hidden; 52 } 53 * html .clearfix {height: 1%;} 54 </style> 55 56 </head> 57 <body> 58 <div class="box"> 59 <div class="list clearfix"> 60 <div class="list_head"></div> 61 <div class="list_content">这是内容</div> 62 </div> 63 <div class="list clearfix"> 64 <div class="list_head"></div> 65 <div class="list_content">这是内容</div> 66 </div> 67 68 <span class="justify_fix"></span> 69 </div> 70 <div class="box"> 71 <div class="list clearfix"> 72 <div class="list_head"></div> 73 <div class="list_content">这是内容</div> 74 </div> 75 <div class="list clearfix"> 76 <div class="list_head"></div> 77 <div class="list_content">这是内容</div> 78 </div> 79 <div class="list clearfix"> 80 <div class="list_head"></div> 81 <div class="list_content">这是内容</div> 82 </div> 83 <div class="list clearfix"> 84 <div class="list_head"></div> 85 <div class="list_content">这是内容</div> 86 </div> 87 <span class="justify_fix"></span> 88 </div> 89 90 </body> 91 </html>
要点：
1. inline-block使用及ie兼容
2. 末行填充justify_fix元素
3. ie兼容：text-justify:distribute-all-lines;