text-align:justify 使用参考

对 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、width: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自适应列表布局末行对齐修复实例页面

行文仓促,如有错误,欢迎批评指正~~~