对于多个元素同在同一行的布局,如比较常见的是轮播。下面我将探讨这这一布局的做法:

首先约定html结果如下:

div.row
div.col
div.col
div.col
...

做法一:

设定div.row的宽度为div.col宽度*div.col的个数,然后设置div.colfloat:leftdisplay: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 高度不相等时,会按顶部对齐,当然你也可以bottommiddle。而且,如果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应该也一样。


如果你还有其它想法,欢迎大家在评论处告诉我哦。

github-JChehe

white-space:nowrap 的妙用的更多相关文章

  1. 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=\ ...

  2. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  3. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  4. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  5. source insight 保存时删除多余空格,去除多余空格 space tab键

    source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...

  6. source insight 保存时删除多余空格,去除多余空格 space tab键【转】

    转自:http://blog.csdn.net/lanmanck/article/details/8638391 上传源码时最好把空格行去掉,以前介绍了使用notepad++,现在发现,习惯用sour ...

  7. Engineer in the White Spaces

     Engineer in the White Spaces Michael Nygard A SySTEM ConSiSTS oF inTERdEpEndEnT pRogRAMS. We call ...

  8. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  9. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

随机推荐

  1. UVaLive 7267 Mysterious Antiques in Sackler Museum (if-else,枚举)

    题意:给定四个矩形,要求从中选出三个,能不能拼成一个矩形. 析:说到这个题,我还坑了队友一次,读题读错了,我直接看的样例,以为是四个能不能组成,然后我们三个就拼命想有什么简便方法,后来没办法了,直接暴 ...

  2. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式(一)

    本文转载自 http://blog.csdn.net/cutesource/article/details/6192016 如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下 ...

  3. android 多线程数据库读写分析与优化

    最新需要给软件做数据库读写方面的优化,之前无论读写,都是用一个 SQLiteOpenHelper.getWriteableDataBase() 来操作数据库,现在需要多线程并发读写,项目用的是2.2的 ...

  4. CGContext绘图

    0 CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文 1 CGContextMoveToPoint 开始画线 2 CGContex ...

  5. Js Pattern - Namespace Pattern

    bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function ...

  6. 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 ...

  7. delphi HTML代码

    ################################属性 设置################################################字体设置{//-------- ...

  8. [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, ...

  9. ios开发——实用技术OC篇》倒计时实现的两种方法

    倒计时实现的两种方法 timeFireMethod函数,timeFireMethod进行倒计时的一些操作,完成时把timer给invalidate掉就ok了,代码如下: secondsCountDow ...

  10. 关于使用NotificationComat导致android2.3及以下版本无法显示自定义布局的解决方法.

    大伙都知道 android-support-v4为我们提供了很多兼容的解决方案, 其中就有关于通知栏的. NotificationCompat, 顺利成章操刀显示通知. eg: Intent inte ...