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;
}

小提琴：

https://jsfiddle.net/qLysghjf/

Answer 1

尝试为icon_container类添加垂直对齐：

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

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

Answer 2

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

所以css是：

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

Answer 3

请在 float:left css课程中添加 .icon_container 。希望这会起作用

display：内联块无法正常工作

3 个答案: