white-space:nowrap 的妙用
对于多个元素同在同一行的布局,如比较常见的是轮播。下面我将探讨这这一布局的做法:
首先约定html
结果如下:
div.row
div.col
div.col
div.col
...
做法一:
设定div.row
的宽度为div.col宽度*div.col的个数
,然后设置div.col
为float:left
或display:inline-block
对于 float:left
, div.row
需要清除浮动。
对于 display:inline-block
,需要压缩html或者为div.row
设置 font-size:0
以去除 div.col
之间的水平间隙,后者也顺便去除了垂直方向的间隙(line-height为相对单位时,其最终值为line-height值*font-size)。对于前者,还有垂直方面的间隙未去除,我们可以为div.col
设置 vertical-align:top
或为div.row
设置 line-height:0
。推荐前者(即vertical-align),因为当 div.col
高度不相等时,会按顶部对齐,当然你也可以bottom
或middle
。而且,如果div.col
内含有行内元素或inline-block元素时,div.col
会按其子元素最后一行inline/inline-block
元素的基线进行垂直方向上的对齐(vertical-align默认值是baseline)。因此最好显式设置div.col
的垂直方向上的对齐。
baseline基线
水平与竖直方向上的间隙
按其子元素最后一行inline/inline-block
元素的基线进行垂直方向上的对齐
这也符合张鑫旭老师的《CSS深入理解vertical-align和line-height的基友关系》这篇文章讲到的:一个inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。
补充知识:line-height的值为数字与百分比的区别
百分比是当前元素的字体大小
*
百分比,算出的值让后代元素继承(固定值,后代元素均用此值);而数字是让后代元素的字体大小*
数值(相对值,后代元素根据自身字体大小算出适合的行高)。具体可以看 《深入了解css的行高Line Height属性》。
当然,如果div.row
内有行内元素或inline-block元素,它们会继承父元素的font-size与line-height,因此需要重新设置font-size和line-height,以覆盖div.row
对应的值。
做法一的案例有:淘宝首页的主轮播(通过子元素浮动,父元素清除浮动)。
这种做法的好处有:①兼容性好,无须清除div.col
直接的间隙,因为浮动后的元素会一直与当前行框(line box)顶部对齐,vertical-align对齐无效。
不好的地方:要计算div.row
的宽度。
做法二(这也是我想讲的巧妙)
直接上代码:
*{
margin: 0;
padding: 0;
}
.row{
white-space: nowrap; // 让div.col放置在同一行
background-color: rgb(0,0,0); // 背景色,以方便观察
font-size: 0; // 去除水平+垂直间隙
}
.col{
display: inline-block;
*display: inline; // 兼容IE 6/7,模拟inline-block效果
*zoom: 1; // 兼容IE 6/7,模拟inline-block效果
width: 20%;
margin-right: 30px;
height: 100px;
background-color: red;
font-size: 14px; // 覆盖父元素的font-size
vertical-align: top; // 向上对齐,同时去除垂直间隙
}
黑色背景是div.row
,红色背景是 div.col
。
可看出这与与应用了white-space:nowrap
的文本容器效果一样。
做法二的好处有:
①兼容性好(IE5都正常),无须计算宽度,可任意放多个 div.col
,而 div.row
的宽度等于其父元素的宽度(但IE6则会将div.row撑大,在IE6中,width
如同min-width
效果,height
也是)。
IE5上的效果,IE6应该也一样。
如果你还有其它想法,欢迎大家在评论处告诉我哦。
white-space:nowrap 的妙用的更多相关文章
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- White space is required before the encoding pseudo attribute in the XML declaration.
错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- source insight 保存时删除多余空格,去除多余空格 space tab键
source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...
- source insight 保存时删除多余空格,去除多余空格 space tab键【转】
转自:http://blog.csdn.net/lanmanck/article/details/8638391 上传源码时最好把空格行去掉,以前介绍了使用notepad++,现在发现,习惯用sour ...
- Engineer in the White Spaces
 Engineer in the White Spaces Michael Nygard A SySTEM ConSiSTS oF inTERdEpEndEnT pRogRAMS. We call ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
随机推荐
- UVaLive 7267 Mysterious Antiques in Sackler Museum (if-else,枚举)
题意:给定四个矩形,要求从中选出三个,能不能拼成一个矩形. 析:说到这个题,我还坑了队友一次,读题读错了,我直接看的样例,以为是四个能不能组成,然后我们三个就拼命想有什么简便方法,后来没办法了,直接暴 ...
- 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式(一)
本文转载自 http://blog.csdn.net/cutesource/article/details/6192016 如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下 ...
- android 多线程数据库读写分析与优化
最新需要给软件做数据库读写方面的优化,之前无论读写,都是用一个 SQLiteOpenHelper.getWriteableDataBase() 来操作数据库,现在需要多线程并发读写,项目用的是2.2的 ...
- CGContext绘图
0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文 1 CGContextMoveToPoint 开始画线 2 CGContex ...
- Js Pattern - Namespace Pattern
bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function ...
- Codeforces Gym 100286F Problem F. Fibonacci System 数位DP
Problem F. Fibonacci SystemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...
- delphi HTML代码
################################属性 设置################################################字体设置{//-------- ...
- [GIF] The Phase Property in GIF Loop Coder
In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, ...
- ios开发——实用技术OC篇》倒计时实现的两种方法
倒计时实现的两种方法 timeFireMethod函数,timeFireMethod进行倒计时的一些操作,完成时把timer给invalidate掉就ok了,代码如下: secondsCountDow ...
- 关于使用NotificationComat导致android2.3及以下版本无法显示自定义布局的解决方法.
大伙都知道 android-support-v4为我们提供了很多兼容的解决方案, 其中就有关于通知栏的. NotificationCompat, 顺利成章操刀显示通知. eg: Intent inte ...