如何用CSS调整div盒子与标题布局，将抹茶图片移至右侧并使文字居下？

核心思路说明 #

直接用margin没效果的原因是：默认文档流中块级元素会占满整行，单纯的margin无法让图片靠右同时让标题稳定显示在其下方。需要通过设置布局上下文改变元素的排列逻辑，下面是几种实用的实现方案：

方案1：Flex布局（推荐，适配性强） #

假设你的基础HTML结构如下：

<div class="matcha-container">
  <img src="matcha.jpg" alt="matcha" class="matcha-img">
  <h3 class="matcha-title">你的标题文本</h3>
</div>

对应的CSS代码：

/* 调整容器整体位置（和页面其他元素的间距） */
.matcha-container {
  margin: 30px 0; /* 上下间距，可按需修改 */
  max-width: 1200px; /* 限制容器宽度，避免布局过宽 */
  margin-left: auto;
  margin-right: auto; /* 让容器居中，也可直接设margin-left控制左偏移 */
  
  /* 核心：开启flex布局，垂直排列子元素 */
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 让子元素靠右对齐 */
}

.matcha-img {
  width: 220px; /* 按需调整图片尺寸 */
  height: auto;
  margin-bottom: 10px; /* 图片和标题的间距 */
}

.matcha-title {
  margin: 0; /* 清除标题默认margin */
  text-align: right; /* 标题文本靠右，和图片对齐 */
  /* 可额外添加字体、颜色等样式 */
}

如果你的HTML结构是标题在图片前面，只需给元素加order属性调整顺序：

.matcha-title {
  order: 2;
}
.matcha-img {
  order: 1;
}

方案2：Grid布局（简洁直观） #

同样基于上面的HTML结构，CSS代码如下：

.matcha-container {
  margin: 30px auto;
  max-width: 1200px;
  
  display: grid;
  grid-template-columns: 1fr; /* 单列布局 */
  justify-items: end; /* 子元素靠右对齐 */
  gap: 10px; /* 图片和标题的间距，替代margin-bottom */
}

.matcha-img {
  width: 220px;
  height: auto;
}

.matcha-title {
  margin: 0;
  text-align: right;
}

方案3：绝对定位（适合特殊场景） #

如果需要更精细的位置控制，可使用绝对定位，但要注意容器需设为相对定位：

.matcha-container {
  position: relative;
  margin: 30px auto;
  max-width: 1200px;
  min-height: 260px; /* 需设置足够的最小高度，避免内容溢出 */
}

.matcha-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
  height: auto;
}

.matcha-title {
  position: absolute;
  right: 0;
  top: calc(220px + 10px); /* 图片高度 + 间距 */
  margin: 0;
  text-align: right;
}

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