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"> </span>
<span class="list left_fix"> </span>
<span class="list left_fix"> </span>
<span class="list left_fix"> </span>
<span class="list left_fix"> </span>
</div>
上面HTML中的left_fix
样式如下:
.left_fix{height:0; padding:0; overflow:hidden;}
text-justify实操的更多相关文章
- Selenium之unittest测试框架详谈及实操
申明:本文是基于python3.x及selenium3.x. unittest,也可以称为PyUnit,可以用来创建全面的测试套件,可以用于单元自动化测试(模块).功能自动化测试(UI)等等. 官方文 ...
- unittest测试框架详谈及实操(二)
类级别的setUp()方法与tearDown()方法 在实操(一)的例子中,通过setUp()方法为每个测试方法都创建了一个Chrome实例,并且在每个测试方法执行结束后要关闭实例.是不是觉得有个多余 ...
- 【Social listening实操】作为一个合格的“增长黑客”,你还得重视外部数据的分析!
本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,作者引出了"外部数据"这一概 ...
- Appium常用Api实操
本文是基于python语言在android上实操的,仅记录(忽略排版~~~) 会不时更新的: from appium import webdriver from selenium.webdriver. ...
- 动手实操:如何用 Python 实现人脸识别,证明这个杨幂是那个杨幂?
当前,人脸识别应用于许多领域,如支付宝的用户认证,许多的能识别人心情的 AI,也就是人的面部表情,还有能分析人的年龄等等,而这里面有着许多的难度,在这里我想要分享的是一个利用七牛 SDK 简单的实现人 ...
- Istio的流量管理(实操二)(istio 系列四)
Istio的流量管理(实操二)(istio 系列四) 涵盖官方文档Traffic Management章节中的inrgess部分. 目录 Istio的流量管理(实操二)(istio 系列四) Ingr ...
- ubuntu 18.04 搭建flask服务器(大合集,个人实操)
ubuntu 18.04 搭建flask服务器(大合集) Ubuntu python flask 服务器 本次使用的Ubuntu版本为:Ubuntu 18.04.5 LTS (GNU/Linux 4. ...
- kivy之Button常用属性实操练习
kivy提供了Button按钮一系列属性来改变样式,下面列了常用的一些Button属性并用实操案例进行演练学习. 新建一个main.py,内容代码如下: from kivy.app import Ap ...
- kivy之Label属性及文本标记实操练习
关于kivy内label功能有二部分内容,一个是label小部件属性,另一个是label文本标记属性,实操练习的效果图如下: . 现将label常用的这二类属性整理如下: 现在我们来进行实操练习,在p ...
- kivy之TextInput属性实操练习
TextInput属性比较多,常用在页面设计上的属性做了实操练习,便于很直观的了解学习本部件.并将其中一个输入提示的属性在实操源码里单独建立了一个功能进行演示. 主程序文件main.py我就不贴出来了 ...
随机推荐
- easyui DataGrid 工具类之 util js
var jq; var tab; var tabsIndex; /** ...
- Topcoder SRM 683 Div2 B
贪心的题,从左向右推过去即可 #include <vector> #include <list> #include <map> #include <set&g ...
- 参考:鼠标点击事件(Selenium)
1.鼠标右键点击操作:Actions action = new Actions(driver) ;action.contextClick(driver.findElement(By.xpath(xpa ...
- this的用法
因为循环是非常快的,我们手动点击的时候,for循环已经循环完了.如果在循环里面添加点击事件,点击事件的i的值就是循环结果的那个值,而不是对应的循环的值,此时,我们就需要用到this 来实现 点击 ...
- inline-boock的默认间距
1 2 3 4 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></ ...
- 前言,学习ios编程(坚持)
其实,尝尝有人很疑惑,不知道自己要干嘛,看到很多的培训机构,不知道怎么选择但是又想进入软件行业.其实呢学习不一定要靠培训机构,一定要培训,特别是 当人家把自己吹的天花乱坠的时候,然并卵.出来之后,也只 ...
- TCP/IP基础概念及通信过程举例
TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...
- 看守所、戒毒所3D指纹门禁系统解决方案
为响应"科技强警"的战略方针,华本构建了一个完整的.集成的.可靠的.易操作的高安全性门禁系统,应用于看守所.戒毒所.公安局和部队等单位,使管理更现代化.规范化,有效地预防和制止越狱 ...
- jquery tmpl 详解
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...
- virsh创建和恢复快照
virsh创建快照: virsh snapshot-create-as image的名称 snapshot的名称 例如: virsh snapshot-create-as 172.16.1.1_cen ...