首页 > 代码库 > 自适应的两端对齐：text-align:justify

自适应的两端对齐：text-align:justify

2024-07-17 16:32:23   215人阅读

 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;


联系
我们