仅用CSS实现h4与左浮动图片并排、长文本环绕效果的方法

实现方案 #

问题原因 #

你当前的DOM结构中h4元素排在img前面，而h4是默认占满整行的块级元素，即便给后续的img设置左浮动，img也只能排列在h4的下方，所以会出现标题在图片上方的情况。

最优解决方法 #

调整DOM元素顺序，将img放到h4前面，浮动逻辑就能正常生效，同时天然支持段落文字环绕效果。

代码示例

<div class="card">
  <img src="你的图片路径" alt="示例图">
  <h4>标题内容</h4>
  <p>这里是段落文本，当内容长度超过图片高度时会自动环绕到图片下方排版</p>
</div>

/* 基础样式 */
.card::after {
  /* 父容器清除浮动，避免高度塌陷 */
  content: "";
  display: table;
  clear: both;
}
img {
  /* 增加边距避免文字贴紧图片，可按需调整 */
  margin: 0 20px 15px 0;
}
h4 {
  /* 去掉默认上边距，让标题顶部和图片顶部对齐 */
  margin-top: 0;
}

@media (min-width: 550px) {           
  img {
    float: left;
    width: 300px;
  }
}

这个方案兼容所有主流浏览器，不需要额外的复杂属性，完全满足标题在图片右侧、长文本自动环绕的需求。

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