对 text-align:justify 不大了解的,可以先看这里:从css text-align:justify 谈谈 text-align 文本对齐方式,讲的比较浅显易懂,本篇相对深入些,最好先看前面的
写代码的时候遇到这样一个设计图:
文字格式是两端对齐,首先想到的是用 letter-spacing ,不过很麻烦,不太方便。实际上 text-align:justify, 可以实现两端对齐!以下图为例:
<div class="par"> <span class="son"> 上海 </span> <span class="son"> 上海活动 </span> <span class="son"> 内蒙古活动上 </span> </div>
* { margin: 0; padding: 0; } .par { width: 170px; overflow: hidden; border: 1px solid grey; text-align: justify; padding: 10px; } .son { font-size: 15px; } .son::after { content: ''; height: 0; width: 100%; display: inline-block; }
注意点:
1、需要两端对齐的元素改成了 span,内联元素,当然你想用 div 也行,不过得设置 display:inline; 原理应该很好理解,text-align 本来就是针对文字内容样式的,当然应该是内联样式;
2、.son 都用了伪元素,核心样式设置了 height:0、100%、display:inline-block; 这是用伪元素多撑一行,因为 text-align:justify 对最后一行没用;display 不能为 block,否则无效,因为 text-align 是针对文本内容的,对于块级元素自然无效,但是设置 inline 又无法设置宽高多占一行,所以只能 inline-block;
3、text-align:justify 加在父元素上
后面是针对 IE8 ,正常可以忽略不用看了。
不幸的是,IE8 不行,或者 IE 都不行,要兼容 IE 也不是不行,方法倒是想出来了,不过你肯定不会用来给文字做这样的排版,效果图:
CSS:
* { margin:0; padding:0; } .par { width: 170px; overflow: hidden; border: 1px solid grey; text-align:justify; padding:10px; } .son { font-size: 15px; display: inline-block; } .justify { height: 0; width: 100%; display: inline-block; }
HTML:
<div class="par"> <span class="son">上</span> <span class="son">海</span> <span class="justify"></span> <span class="son">上</span> <span class="son">海</span> <span class="son">活</span> <span class="son">动</span> <span class="justify"></span> <span class="son">内</span> <span class="son">蒙</span> <span class="son">古</span> <span class="son">活</span> <span class="son">动</span> <span class="son">上</span> <span class="justify"></span> </div>
我知道你被这样的代码吓到了,,,我也是,,,但是换成照片两端对齐就会很好用,效果图(左边 chrome ,右边 IE8):
代码是这样的:
CSS:
* { margin:0; padding:0; } .par { width: 170px; overflow: hidden; border: 1px solid grey; text-align:justify; padding:10px; } .son { font-size: 15px; display: inline-block; } .justify { height: 0; width: 100%; display: inline-block; } img { width: 30px; height: 30px; }
HTML:
<div class="par"> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="son"><img src="images/google.png" alt="" /></span> <span class="justify"></span> </div>
这种用法咱们总结下:
1、两端对齐的元素要是一个个 inline-block 元素,所以图片可以直接放,文字就要被迫拆开了
2、需要换行的,用 span.justify 换,样式还和之前一样,空占一行,这样同一行的会自动两端对齐
3、其他和前面一样,但是有一点要注意, span 元素间必须有间隔,譬如正常换行是可以的、有空格也是可以的,如果连在一起就没有效果
举例:
参考文章,推荐:(第一篇讲的很细致)
从css text-align:justify谈谈text-align文本对齐方式
text-jusyify下的inline-block自适应列表布局末行对齐修复实例页面
行文仓促,如有错误,欢迎批评指正~~~