html - 显示:内联 block 无法正常工作

Question

我有两个 div，我想将它们并排放置。当我给两个 div 都提供 display: inline-block; 时，这会起作用属性，但是一旦我添加了 <p>标记到其中一个 div 中，该 div 的位置不正常。这就是我正在使用的:

HTML:

<div class = "icon_container">
    <button><img src="images/favorite.png" class = "profile_icons"/></button><p>1234</p>
</div>
<div class = "icon_container">
    <button><img src="images/tool.png" class = "profile_icons"/></button>
</div>

CSS:

.icon_container {
    height: 150px;
    display: inline-block;
}

fiddle :

https://jsfiddle.net/qLysghjf/

Answer 1

嗯，根据这个post @robertnyman，要使 inline-block 元素垂直右对齐，它需要 vertical-align: top;。我试过你的 fiddle 得到的结果是: https://jsfiddle.net/qLysghjf/3/

所以CSS是:

.icon_container {
  height: 100px;
  display: inline-block;
  background-color: red;
  vertical-align: top;
}