text-justify实操

转自:http://www.zhangxinxu.com/wordpress/?p=1514
text-justify实操text-justify实操
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,里面就是个&nbsp;(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦!

如下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;}
 
上一篇:Sql Server 数据库作业备份


下一篇:jQuery Datepicker日期控件