关于display:inline-block的元素不在同一水平线

2017-03-21
阅读量
css

今天在开发一个仿网易云的应用时,在布局上遇到一个特别奇怪的问题。先看布局如下。 这里写图片描述 因为我是用vue写的,但是忽略其语法,就当是个不同的九宫格布局。 css代码 这里写图片描述 就粗现了如下的情况,让我百思不得其解。 这里写图片描述 没错,都是一样的代码,就在第八张图片的时候出现了错位。 当然问题来了,我们也不用怕,要发挥出一个程序猿应有的品质,去修复这个BUG,后来我想起来,因为display:inline-block是一种介于inline和block的东西,而它也和inline属性一样,存在基准线的问题,我就试了试把所有的li改成了。 这里写图片描述 这样就完美解决了问题。 这里写图片描述 看!再也不会出现那种高度不一的界面了。 另外可能你看到,我把float:left注释了,如果你用float布局,不用inline-block也是不会出现这种情况。 如果你想深入了解inline-block这个属性,送上张旭鑫老师的一篇博文,也许对你有帮助http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

赞赏

欢迎关注我的公众号,秋风的笔记。

本站总访问量