CSS Grid布局下图片无法分列显示的问题求助

你给section.authentic设置了两列grid，但所有内容（标题、段落、图片）都嵌套在同一个.right-col容器里——这相当于grid的第一列放了这个div，第二列完全是空的，图片自然只会在段落下方，float:right和调整行高当然没用（grid布局里float会失效）。

根据你的需求选一种：

方案1：标题段落左列，图片右列 #

直接调整HTML结构，让section的子元素分成两个容器，分别对应grid的两列：

<section class="authentic">
  <div class="text-col">
    <h2>Authentic. Awesome</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus iste neque asperiores dolores eligendi tempore quia, cupiditate exercitationem fugiat eius.</p>
  </div>
  <div class="image-col">
    <img src="images/food.jpg" alt="bowl">
  </div>
</section>

CSS保持你的grid设置即可，还能加个间距优化排版：

section.authentic {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 20px; /* 可选：列之间的间距 */
}

方案2：在.right-col内部实现文字+图片分列 #

如果不想改HTML，就把grid布局应用到.right-col上，同时指定文字和图片的列位置：

/* 先移除section的grid设置（或按需调整） */
section.authentic {
  /* 原grid代码可以删掉 */
}

.right-col {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 20px;
}

/* 让标题和段落合并占第一列 */
.right-col h2, .right-col p {
  grid-column: 1 / 2;
}

/* 图片放在第二列 */
.right-col img {
  grid-column: 2 / 3;
  object-fit: cover; /* 可选：防止图片变形 */
  height: 100%; /* 可选：让图片和文字区域高度对齐 */
}

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