多个span并列显示时，高度不一致的问题_html/css_WEB-ITnose

最近在进修CSS，遇到一个比较困惑的问题，求助一下。

直接上代码：

div {	width: 70px;	height: 75px;	border: 1px solid red;	margin: 10px;	display: inline-block;	text-align: center;	font-size: 14px;}div img {	width: 55px;	height: 55px;	border: 1px solid #aaa;}

<div>单行</div><div>单行</div><div>	<!--无--></div><div><img  src="/static/imghw/default1.png"  data-src="images/headpic/1.jpg"  class="lazy"   title="单行图片" alt="多个span并列显示时，高度不一致的问题_html/css_WEB-ITnose" ></div><div>	<img  src="/static/imghw/default1.png"  data-src="images/headpic/2.jpg"  class="lazy"   alt="多个span并列显示时，高度不一致的问题_html/css_WEB-ITnose" > 图片+文字</div><div>	三行	<br/> 三行	<br/> 三行</div>

显示效果：



我很纳闷了，每个div的高度我都已经固定成75px了，为什么随着里面内容的变化（内容并没有超出div的显示区域），div会乱跑呢，只有div里面放着同样的东西（同img或文字）才能固定成同一高度显示。

通过查资料，我发现， 在div上面加个float: left;可以解决这个高度不固定的问题，但是我还是很困惑，产生这个现象的原因是什么呢？ 求大神。

回复讨论(解决方案)

求大神解答，分不多了。

加上这一句

div{vertical-align:top;}

加上这一句

div{vertical-align:top;}

不好意思回复晚了。按照你这样，加上那句CSS确实可以了，都跑一行了。大神能告诉我为啥吗，这跟css的盒模型有关系？

和盒子模型应该没关系，只是为了让同一行的文本和图片对齐而已。我想这也是最初设计时的想法，有时确实会对我们的布局造成困扰。请看下面的图片，更多信息百度下：CSS行高与基线

和盒子模型应该没关系，只是为了让同一行的文本和图片对齐而已。我想这也是最初设计时的想法，有时确实会对我们的布局造成困扰。请看下面的图片，更多信息百度下：CSS行高与基线

非常感谢，明白怎么回事了。分不太多，聊表谢意。