如何在CSS Grid网格布局中实现文字环绕右侧图片的效果

问题排查 #

你现有代码的核心问题如下：

• 网格列定义错误：你声明了3列布局，但需求是两列结构，多余的列会导致布局错位
• CSS语法错误：子元素选择器直接嵌套在.row的样式块内，普通CSS不支持该写法
• HTML结构不合理：按钮、文本、图片没有作为网格的直接子元素，无法通过Grid规则控制各自的占位
• 未给图片设置正确的网格占位规则，也没做自适应限制导致容易溢出

正确实现方案 #

用Grid的自动行占位特性实现需求，核心技巧是给图片设置足够大的行跨度，让图片在自身高度范围内占用右列空间，文字在超出图片高度后自动铺满两列。

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.row {
  display: grid;
  /* 定义两列布局，比例可按需调整 */
  grid-template-columns: 0.45fr 0.55fr;
  /* 行高自动适配内容 */
  grid-auto-rows: auto;
  gap: 10px; /* 可选，调整元素间距 */
}

.button {
  /* 按钮占第一行第一列 */
  grid-area: 1 / 1 / 2 / 2;
  text-align: center;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 按钮宽度按需调整 */
  width: fit-content;
  margin: 0 auto;
}

.img {
  /* 图片占第一行第二列，行跨度设为足够大的值，占用自身高度范围内的所有右列空间 */
  grid-area: 1 / 2 / span 999 / 3;
  max-width: 100%;
  height: auto;
  display: block;
}

.text {
  /* 文字占满所有列，会自动避开图片占用的右列空间 */
  grid-column: 1 / -1;
  line-height: 1.5;
}
</style>
</head>
<body>
<div class="row">
  <button class="button">按钮</button>
  <img class="img" src="https://www.w3schools.com/Css/pineapple.jpg" alt="示例图片">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
  </p>
</div>
</body>
</html>

逻辑说明 #

1. 按钮固定在左上第一行第一列，居中显示
2. 图片的grid-area: 1 / 2 / span 999 / 3规则会让图片从第一行右列开始，向下占用尽可能多的行，直到图片自身高度结束，不会被下方文字挤压
3. 文字设置占满所有列，在图片高度范围内，右列已经被图片占用，所以文字只会在左列显示；超出图片高度后，右列没有元素占用，文字就会自动跨两列铺满整行，完全符合需求

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