如何在文本在前、图片在后时实现二者左对齐布局？

你需要在文本在前、图片在后的HTML结构下，实现文本左对齐、图片紧跟文本右侧且整体组合左对齐的布局，以下是几种可行方案：

方案1：Flexbox布局（推荐，现代浏览器友好） #

这是最简洁直观的实现方式，无需依赖浮动，兼容性优异。

HTML结构：

<span class="content-wrap">
  <p>Learn More</p>
  <img src="你的图片地址" alt="图标"/>
</span>

CSS代码：

.content-wrap {
  display: flex;
  align-items: center; /* 让文本和图片垂直居中对齐 */
}
.content-wrap p {
  margin: 0; /* 清除p标签默认上下外边距，避免换行 */
  margin-right: 10px; /* 文本与图片的间距，可按需调整 */
}

方案2：Inline-block布局（兼容旧浏览器） #

如果需要适配老版本浏览器，可采用此方式：

HTML结构同上，CSS调整为：

.content-wrap {
  white-space: nowrap; /* 强制文本和图片保持在同一行 */
}
.content-wrap p, .content-wrap img {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
}
.content-wrap p {
  margin: 0;
  margin-right: 10px; /* 自定义文本与图片的间距 */
}

为什么之前的浮动方式不符合预期？ #

你之前用float:right时，图片会跑到容器最右侧，是因为浮动的作用是让元素向容器边缘对齐，而非紧跟在前序元素后方。如果非要用浮动实现，需要让容器宽度收缩到内容宽度，同时给文本和图片都设置左浮动，但这种方式不如上面两种方案直观：

.content-wrap {
  display: inline-block; /* 让容器宽度适配内容 */
  overflow: auto; /* 清除浮动影响 */
}
.content-wrap p {
  float: left;
  margin: 0;
  margin-right: 10px;
}
.content-wrap img {
  float: left;
}

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