关于display:inline-block布局导致错位问题分析
移动端设计稿需求是这样的,如下图:
未知的几个头像从左至右并行居中排列。
一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex box,inline-block;
因为是在移动端,于是使用flex box:
.user-list {
margin: 20px auto;
display:-webkit-box;
-webkit-pack:center;
} .user-list li {
width: 46px;
height: 46px;
margin: 0 5px;
border-radius: 50%;
overflow: hidden;
}
.user-list li img {
width: 100%;
}
<ul class="user-list">
<li><img src="data:images/u137.png" /></li>
<li><img src="data:images/user2.jpg" /></li>
<li><img src="data:images/u137.png" /></li>
<li><img src="data:images/user.jpg" /></li>
<li><img src="data:images/u137.png" /></li>
</ul>
嗯嗯,一切看起来很完美,居中了,可以放下好几个。但是,如果要放下10个,擦,没法换行,悲剧了。
于是使用display:inline-block,大家都知道块级元素和行内元素的区别,inline-block就是让你两者兼顾。
.user-list {
margin: 20px auto;
text-align: center;
} .user-list li {
display: inline-block;
width: 46px;
height: 46px;
margin: 0 5px;
border-radius: 50%;
overflow: hidden;
}
.user-list li img {
width: 100%;
}
于是出现了下面这种情况:
在IOS上是这样的:
在chrome:
你妹,到底几个意思,上上下下的....
这些问题在手机上出现的,测试的就找到我问什么情况,我说在PC上浏览器都是好的啊,我估计是inline-block导致的,但是试了半天一切正常。最后估摸着我写的demo里面各个图片是一样大小的,会不会真是数据头像不一样大?
然后换了上面的图片,在PC上复现了问题。既然能在PC上复现,那问题就好解决多了。
导致人问题分析如下:
1、display:inline-block,是基于baseline对齐的,大小不一会导致上下不齐,所以设置的时候最好设置vertical-align属性。
2、图片的宽度设置是100%自适应的,长宽高不一致会导致头像显示不完整,如上面,成半圆了,所以设置成max-height:100%;
搞定!
.user-list {
margin: 20px auto;
text-align: center;
} .user-list li {
display: inline-block;
width: 46px;
height: 46px;
margin: 0 5px;
border-radius: 50%;
overflow: hidden;
vertical-align: top;
} .user-list li img {
max-height: 100%;
}
对于display:inline-block的知识可以参考:http://ued.taobao.org/blog/2012/08/inline-block/
关于display:inline-block布局导致错位问题分析的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:block;inline;inline-block大总结
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
随机推荐
- 某个js插件没有执行
今天遇到一个奇怪的问题,bootstrap-table插件根本没有执行.后来发现用于执行bootstrap启动的js文件出错.导致这个不能顺利执行错误js中的程序.一般导致插件不能顺利执行有两个原因. ...
- centos 7 设置开机启动服务
2018-12-25 Centos7下添加开机自启动脚本和服务的方法 以docker 服务为例 1.centos7自带命令设置 systemctl enable docker.service 2.设置 ...
- Linux使用日志
Linux使用日志 ----------------------------------------------------------------------------- SecureCRTPor ...
- Mac系统下Eclipse代码联想功能(代码助手,代码提示)快捷键
Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改一.每次输入都自动提示点击Eclipse,使其成为第一响应者,preferences->Java->Editor-& ...
- cucumber & selenium & bddtest
目录 1.Cucumber介绍 refer link: 2.使用步骤 2.1 引入依赖 2.2新建test.future文件 2.3在resource目录下创建cucumber.bat,执行bat,c ...
- (转)浅谈 Linux 系统中的 SNMP Trap
原文:https://www.ibm.com/developerworks/cn/linux/l-cn-snmp/index.html 简介 本文讲解 SNMP Trap,在介绍 Trap 概念之前, ...
- React 同构开发(二)
React 同构 所谓同构,简单的说就是客户端的代码可以在服务端运行,好处就是能极大的提升首屏时间,避免白屏,另外同构也给SEO提供了很多便利. React 同构得益于 React 的虚拟 DOM.虚 ...
- android httpclient 发送 PATCH 请求
Put 用于全部更新 Patch 用于部分更新 重写一下 HttpPut 或 HttpPost 的 getMethod 方法 /** * Send a patch request */ public ...
- ruby中的== eql?和equal?区别
原文 http://www.wellho.net/mouth/985_Equality-in-Ruby-eql-and-equal-.html Equality in Ruby - == eql? a ...
- 纯CSS让overflow:auto页面滚动条出现时不跳动
现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...