移动端设计稿需求是这样的,如下图:

未知的几个头像从左至右并行居中排列。

一般可能直接使用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布局导致错位问题分析的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  5. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:block;inline;inline-block大总结

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

随机推荐

  1. git恢复到上次提交

    4个区 5种状态 未修改(Origin) 已修改(Modified) 已暂存(Staged) 已提交(Committed) 已推送(Pushed) 检查修改 已修改,未暂存(检查工作区与暂存区间的差异 ...

  2. P2540 斗地主增强版

    P2540斗地主增强版 参考大佬题解 思路:顺子暴力搜,剩下的牌我不会贪心所以用记忆化搜索(或者dp): 注意:双王不能当对,二不算顺子 代码 #include <cstdio> #inc ...

  3. Qt for android运行时出错 Error: Target id 'android--1' is not valid

    [提问]windows7下Qt for android运行时出错 Error: Target id 'android--1' is not valid[复制链接] 上一主题下一主题   离线yijun ...

  4. ${__BeanShell(${SCRIPT})}

    通过将变量名称括在' $ { '和' } '中来引用测试元素中的变量. 函数以相同的方式引用,但按照惯例,函数名称以“ __ ” 开头,以避免与用户值名称冲突*.有些函数使用参数来配置它们,这些函数用 ...

  5. [Alpha]Scrum Meeting#4

    github 本次会议项目由PM召开,时间为4月5日晚上10点30分 时长20分钟 任务表格 人员 昨日工作 下一步工作 木鬼 调整&分配工作 撰写博客目录 SiMrua 手工建立再训练数据( ...

  6. python创建目录并更改权限的代码

    如下代码段是关于python创建目录并更改权限的代码. import os os.mkdir("foo", 0666)

  7. wordpress 后台页面无法显示绑定的台湾语言

    问题:当前切换到的语言是English,然后在页面的列表中,分别显示的语言有中文和香港,没有出现台湾的图标,如上图所示 原因:在polylang插件的设置里面,可以看到台湾语言的 Language c ...

  8. 赋值运算与深浅copy

    1.复制运算 l1 = [1,2,3,['a','b']] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 3, ['a', 'b']] print(l2) # [1 ...

  9. 转:五年java人的一点感悟

    转自:五年java人的一点感悟 恍然间,发现自己在这个行业里已经摸爬滚打了五年了,原以为自 己就凭已有的项目经验和工作经历怎么着也应该算得上是一个业内比较资历的人士了,但是今年在换工作的过程中却遭到了 ...

  10. OpenCV Intro - Perspective Transform

    透视变换(Perspective Transformation)是将图片投影到一个新的视平面(Viewing Plane),也称作投影映射(Projective Mapping).通用的变换公式为: ...