人人网热门分享列表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="//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="//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>