今天一个朋友给我说，给你看个两端对齐的效果
当时我看着真不以为然，我就觉得两端对齐有什么好讨论的这个问题
但是用心慢慢看了，也是有技巧在里面的
话不多说，上代码
<!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;
}
这方法结合宽度分离，适合整个平台的 所有图片，文字列表,不用计算宽度啥的，很好用
