内联块不一致答案

【问题标题】：inconsistency in inline-block内联块不一致
【发布时间】：2026-01-16 20:55:02
【问题描述】：

我在inline-block 中混合了div 和img，但该div 没有与其他图像内联。你能告诉我为什么以及如何解决它吗？

我的代码：

.floating-box {
  display: inline-block;
  width: 150px;
  height: 75px;
  margin: 20px;
  border: 3px solid #73AD21;
}
.after-box {
  border: 3px solid red;
}

 <h2>The New Way - using inline-block</h2>
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<div class="floating-box">Yeah</div>
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<div class="after-box">Another box, after the floating boxes...</div>

【问题讨论】：

我认为您可能需要更详细地解释您的问题。
@Teemu div 没有与其他图片内联
虽然代码不起作用，但通信应该仍然有效； )。
欢迎您！请提供minimal reproducible example。

标签： javascript html css image

【解决方案1】：

您需要添加 css 属性 vertical-align: top; 以对齐所有元素的顶部。

示例代码段：

.floating-box {
  display: inline-block;
  width: 150px;
  height: 75px;
  margin: 20px;
  border: 3px solid #73AD21;
  vertical-align: top;
}
.after-box {
  border: 3px solid red;
}

<h2>The New Way - using inline-block</h2>
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<div class="floating-box">Yeah</div>
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<img class="floating-box" src="https://i.stack.imgur.com/6oBB6.png">
<img class="floating-box" src="https://i.stack.imgur.com/qnTG7.jpg">
<div class="after-box">Another box, after the floating boxes...</div>

详细了解垂直对齐属性here

【讨论】：