码迷,mamicode.com
首页 > 其他好文 > 详细

实现多行文字对齐的原理

时间:2015-05-18 00:52:05      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

多行文字对齐的现象

之前已经实现过多行文字对齐的方法,实现方法详见:多行文字对齐的实现方法,多行文字兼容IE6的关键就是一个空标签<i></i>,

下面我们来看一看不加i标签之前IE6下显示的效果:

技术分享

而chrome下的效果:

技术分享

加下i标签后,IE6下的显示效果:

技术分享

可见在现代浏览器中,对于有没有i标签是没有影响的,为什么加上这个标签之后,IE6就可以实现多行文字对齐了呢?

多行文字对齐的原理

在盒子模型中,父盒子line-height的高度是由子盒子中高度最高的那个盒子决定的,在本例中,我们设置了还有多行文字盒子的line-height值,以保证多行文字之间的间距是正确的,但是这个盒子的高度在IE6不足以撑开整个盒子的高度,所以我们必须引入一个空元素,来把撑加这个高度,读到这里,你可能又有点不太理解了,我们并没有设置这个空元素的line-height的值啊,为什么它能够撑开呢,看一下下面的图你就明白了,

技术分享

因为这个空元素的line-height的值继承自父元素,所以这个空元素的line-height是150,这样就实现了多行文字的垂直对齐了!

 

实现多行文字对齐的原理

标签:

原文地址:http://www.cnblogs.com/sunhk/p/4510884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!