显示：内联块无法正常工作

Question

我有两个 div，我想将它们并排放置。当我给两个 div 都提供 display: inline-block; 属性时，这会起作用，但是一旦我将 <p> 标记添加到 div 之一中 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

请在.icon_containercssclass中添加float:left。希望这会奏效

Answer 2

尝试为您的 icon_container 添加垂直对齐 class:

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

https://jsfiddle.net/qLysghjf/2/

Answer 3

好吧，根据@robertnyman 的 post，要使 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;
}

显示：内联块无法正常工作

display: inline-block not working correctly

html

css

display