如何实现文字紧邻第一张图片右侧排列 解决CSS设置效果不符问题

解决方案 #

推荐使用Flex布局实现，不会出现float带来的元素脱离文档流、排版错位的问题，实现逻辑更简单：

1. HTML结构

<div class="img-wrap">
  <!-- 第一行放图片和文字 -->
  <div class="first-row">
    <img src="image1.png" alt="第一张图">
    <p>需要展示的文字内容</p>
  </div>
  <!-- 其余图片单独放 -->
  <img src="image2.png" alt="第二张图">
  <img src="image3.png" alt="第三张图">
</div>

2. CSS样式

/* 统一所有图片的尺寸，按需调整数值 */
.img-wrap img {
  width: 200px;
  display: block;
  margin: 6px 0;
}
/* 第一行设置为flex容器，顶部对齐 */
.first-row {
  display: flex;
  align-items: flex-start;
  /* 调整图片和文字的间距，按需修改 */
  gap: 12px;
}

如果需要兼容旧版本浏览器，可以用行内块方案替换flex部分的样式：

.first-row img, .first-row p {
  display: inline-block;
  vertical-align: top;
}
.first-row img {
  margin-right: 12px;
}

之前用float出问题是因为浮动元素会脱离正常文档流，后续元素默认会环绕浮动元素，调整padding时很容易把文字挤到下一行；把img直接放在h1标签内出问题，大多是因为图片默认是块级元素、或者h1的宽度占满整行，把文字挤到了图片下方，用上面两种方案都可以规避这些问题。

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