text-justify实操

转自：http://www.zhangxinxu.com/wordpress/?p=1514

CSS代码：

.video-list{width:540px; margin-left:auto; margin-right:auto; text-align:justify;} /*列表父容器*/
.text-justify-list{display:inline-block; width:97px; margin-bottom:15px; text-align:left; vertical-align:top;}/*列表元素*/

.
.
.

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}/*末行悲剧变喜剧*/

HTML代码：

<span class="text-justify-list">
    <a class="share-figure" href="##">
        <img src="http://g3.ykimg.com/0100641F464D70F6C6415104E10E31D2C67343-769A-CD77-F409-D1FE92B48EE1" />
        <span class="play-icon"> </span>
    </a>
    <span class="share-name"><a title="对着飞机你能尿多远。" href="##">对着飞机你能尿多远。</a></span>
    <span class="share-num">分享:<em>51894</em></span>
    <span class="float-right"><a href="##">分享</a></span></span>

<span class="text-justify-list">
    <a class="share-figure" href="##">
        <img src="http://g4.ykimg.com/0100641F464CA79833C689008BEED04131818F-D866-A169-69C5-3F4E1E8814AD" />
        <span class="play-icon"> </span>
    </a>
    <span class="share-name">
        <a href="##">赵本山和范围的《说情》，可算找到了，太TM的...</a>
     </span>
     <span class="share-num">分享:<em>53223</em></span>
     <span class="float-right"><a href="##">分享</a></span></span>

 .
 .
 .
 <span class="justify_fix"></span>

补充 on 2011-03-16：
很多时候，我们希望列表的最后一行是左对齐排列的，而不是两端对齐，这时候怎么办呢？原理与上面的两端对齐一致。就是复制几个列表元素的外层标签，等宽，但高度为0，里面就是个 (不可缺)，复制的个数一般就是每行元素的列表个数啦，这样肯定可以保证最后一行元素一定是左对齐排列的啦！

如下HTML代码：

<div class="box">
    <span class="list"><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血~~~</span>
    <span class="list"><img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
    .
    .
    .
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
</div>

上面HTML中的left_fix样式如下：

.left_fix{height:0; padding:0; overflow:hidden;}