在进行图片布局时，经常会遇到两端对齐的需求，解决方案有多种，负margin、单独类名、js等都可以。今天要介绍的是利用text-align和after伪类的方法。如下图：
HTML代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>两端对齐demo</title>
</head>
<body>
<ul class="box">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
CSS样式代码如下：
*{margin:0;padding:0}
ul{list-style:none;}
.box{
font-size:0;
letter-spacing:-0.5em;
text-align:justify;
text-justify:distribute-all-lines; /* for ie */
width:302px;
margin:100px auto;
padding:0 13px;
border:2px solid #ccc;
background:#f0f0f0;
}
.box:after{
content:"";
height:0;
width:100%;
display:inline-block;
overflow:hidden;
}
.box li{
display:inline-block;
vertical-align:top;
letter-spacing:normal;
*display:inline;
*zoom:1;
width:90px;
margin:13px 0;
height:120px;
background:#3b5998;
}
如果没有after伪类，在Firefox、Chrome等支持text-align：justify的浏览器中，最后一行不能实现两端对齐。所以after伪类来给容器的最后插入一个空内容，这样，看上去的最后一行，其实是倒数第二行了
如果您觉得本文的内容对您的学习有所帮助：
关键字：
图片布局 div+css