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;
自适应的两端对齐：text-align:justify,布布扣,bubuko.com
时间： 2024-08-02 23:13:35