CSS Grid布局中实现网格项内图片与文字右侧并排显示

安全阿岳

2026-8-30

实现方案

核心思路

全程不需要修改你已经编写完成的Grid布局逻辑，不会破坏现有整体设计效果，仅对需要插入图片的单个网格项做内部布局调整即可实现图文并排。

图片被挤到文字下方的原因：<img>默认为行内元素，当前网格项内部没有做布局划分，当文字占满容器宽度后，图片会自动折行到下一行显示。

具体修改步骤

1. 微调带图片项的HTML结构

将原本混排的文字内容和图片拆分为平级的两个块，不改动外层Grid相关的DOM结构：

<!-- 仅修改带图片的这一个.item，其他item保持原样即可 -->
<div class="item has-image">
  <div class="item-text">
    <div id="rule-title">Never reveal personal information</div>
    The best way to stay safe online is to NEVER share 
    your real name, phone number, address, email or 
    passwords.
  </div>
  <img id="rule-image" src="images/personal.png" alt="个人信息保护提示图标">
</div>

2. 新增内部布局CSS（完全不改动原有Grid配置）

你原有.grid-rules的所有Grid相关样式全部保留，只追加以下样式代码：

/* 仅给带图片的网格项设置内部flex布局，作用范围仅限item内部，不影响外层Grid排列 */
.item.has-image {
  display: flex;
  gap: 16px; /* 可按需调整文字和图片的间距 */
  align-items: flex-start; /* 实现图片与文字顶部对齐 */
}

/* 文字块自动占满剩余宽度 */
.item.has-image .item-text {
  flex: 1;
}

/* 固定图片尺寸，避免被压缩或折行 */
#rule-image {
  width: 72px; /* 可按实际设计稿尺寸调整 */
  height: auto;
  flex-shrink: 0;
}

/* 可选：清理原有hr样式里重复的冗余属性 */
hr {
  position: relative;
  border-top: 2px solid #FFBC3A;
  width: 647px;
  top: -35px;
}