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

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

一般可能直接使用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. 某个js插件没有执行

    今天遇到一个奇怪的问题,bootstrap-table插件根本没有执行.后来发现用于执行bootstrap启动的js文件出错.导致这个不能顺利执行错误js中的程序.一般导致插件不能顺利执行有两个原因. ...

  2. centos 7 设置开机启动服务

    2018-12-25 Centos7下添加开机自启动脚本和服务的方法 以docker 服务为例 1.centos7自带命令设置 systemctl enable docker.service 2.设置 ...

  3. Linux使用日志

    Linux使用日志 ----------------------------------------------------------------------------- SecureCRTPor ...

  4. Mac系统下Eclipse代码联想功能(代码助手,代码提示)快捷键

    Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改一.每次输入都自动提示点击Eclipse,使其成为第一响应者,preferences->Java->Editor-& ...

  5. cucumber & selenium & bddtest

    目录 1.Cucumber介绍 refer link: 2.使用步骤 2.1 引入依赖 2.2新建test.future文件 2.3在resource目录下创建cucumber.bat,执行bat,c ...

  6. (转)浅谈 Linux 系统中的 SNMP Trap

    原文:https://www.ibm.com/developerworks/cn/linux/l-cn-snmp/index.html 简介 本文讲解 SNMP Trap,在介绍 Trap 概念之前, ...

  7. React 同构开发(二)

    React 同构 所谓同构,简单的说就是客户端的代码可以在服务端运行,好处就是能极大的提升首屏时间,避免白屏,另外同构也给SEO提供了很多便利. React 同构得益于 React 的虚拟 DOM.虚 ...

  8. android httpclient 发送 PATCH 请求

    Put 用于全部更新 Patch 用于部分更新 重写一下 HttpPut 或 HttpPost 的 getMethod 方法 /** * Send a patch request */ public ...

  9. ruby中的== eql?和equal?区别

    原文 http://www.wellho.net/mouth/985_Equality-in-Ruby-eql-and-equal-.html Equality in Ruby - == eql? a ...

  10. 纯CSS让overflow:auto页面滚动条出现时不跳动

    现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下push渲染的.开始只有头部一些信息加 ...