两端对齐，图片文字列表

今天一个朋友给我说，给你看个两端对齐的效果

当时我看着真不以为然，我就觉得两端对齐有什么好讨论的这个问题

但是用心慢慢看了，也是有技巧在里面的

话不多说，上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器的应用</title>
<style type="text/css"> 
	
body{background:#fff; text-align:center; font-size:12px;}
body,ul,form,input,dl,dd,p,h1,h2,h3,h4,h5{margin:0;}
ul,input{padding:0;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
a img,input{border:none 0;}
a{text-decoration:none;}
em,i{font-weight:normal;}
.clearfix:after{content:''; clear:both; display:block; height:0; visibility:hidden;}
.clearfix{*zoom:1;}
.tl{text-align:left;}.tc{text-align:center;}.tr{text-align:right;}.fl{float:left;}.fr{float:right;}.fn{float:none;}.f12{font-size:12px;}.f14{font-size:14px;}.f16{font-size:16px;}
.mt20{margin-top:20px;}
.w80{80%; margin:0 auto;}
	
 
.justify:after{
    content: "";
    display: inline-block;
    height: 0;
    overflow: hidden;
     100%;
}
.justify{text-align:justify;/* 两端对齐  - 默认浏览器 */
         text-justify:distribute-all-lines;/* 两端对齐  -  IE浏览器*/
         *zoom:1;
         background:#f00; 
}

.justify{font-size:0;}
.justify li{display:inline-block; *display:inline; *zoom:1; vertical-align:top; text-align:left;200px;overflow:hidden}
.justify li a{display:block;}
.justify li p{font-size:12px;}
</style>
</head>
<body>
	
    	
  <div class="deom mt20 w80">
      <ul class="justify">
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="120" height="72" /></a><p>aa</p></li>
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><p>aa</p></li>
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><p>aa</p></li>
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="120" height="72" /></a><p>aa</p></li>
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><p>aa</p></li>
          <li class="justify_item"><a href="#"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="220" height="72" /></a><p>aa</p></li>
      </ul>
  </div>
</body>
</html>

　　重点的代码在于

.justify{text-align:justify;/* 两端对齐  - 默认浏览器 */
         text-justify:distribute-all-lines;/* 两端对齐  -  IE浏览器*/
         *zoom:1;
         background:#f00; 
}

这方法结合宽度分离，适合整个平台的所有图片，文字列表,不用计算宽度啥的，很好用