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

最新推荐文章于 2021-11-25 09:19:07 发布

转载最新推荐文章于 2021-11-25 09:19:07 发布 · 141 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hongchenok/p/3913596.html

本文介绍了一种实现文本两端对齐的方法，通过CSS样式设置，包括inline-block元素的使用及IE浏览器兼容性处理。文中详细解释了如何通过justify_fix元素解决末行对齐问题，并针对不同版本IE提供了text-justify属性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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;

转载于:https://www.cnblogs.com/hongchenok/p/3913596.html