如何将图标div置于文本末尾？解决block布局排版问题

当前效果 #

预期效果 #

问题原因 #

当前用display: flex会让文本块和图标作为独立的flex项并排，当文本长度超出容器宽度时，图标会被挤到单独一行，无法和文本最后一行对齐。

修复方案 #

只需调整图标的显示属性，让它融入文本流即可：

修改后的CSS

* {
  font-family: Arial, 'sans-serif'
}

/* 移除原有的display: flex，让容器回到默认块布局 */
.test {
}

.info {
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
  /* 设置为行内块元素，跟随文本流排列 */
  display: inline-block;
  /* 垂直居中对齐文本，优化视觉效果 */
  vertical-align: middle;
  /* 可选：和文本保持小间距 */
  margin-left: 6px;
}

HTML 无需修改

<div class="test">
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div class="info">i</div>
</div>

原理说明 #

• 将.info设置为inline-block后，它会从块级元素变为行内块元素，能够和文本在同一行流中排列，自然跟随文本换行，最终停在文本末尾。
• vertical-align: middle确保图标和文本的垂直位置对齐，避免视觉上的错位。

内容的提问来源于stack exchange，提问作者iPPle