技术求助：消除高度不等元素行间隙+768px以上description紧邻photo

我来帮你搞定这两个布局问题，咱们一步步拆解：

问题核心分析 #

你的需求很明确：

1. 消除高度不等元素（比如photo和price）所在行上方出现的空白间隙
2. 在屏幕宽度≥768px时，让description紧贴photo下方，同时保持HTML元素顺序完全不变

原来的flex布局没达到预期，是因为flex的换行逻辑是按行排布，当一行内元素高度不一致时，下一行元素会对齐到该行的起始位置，自然会出现不必要的间隙。改用Grid布局能更精准地控制元素位置，完美适配你的需求。

修改后的完整代码 #

CSS 部分 #

html, body { margin: 0; padding: 0; overflow: hidden; }
* { box-sizing: border-box; }

/* 移动端默认堆叠布局 */
.container {
  display: block;
}

.container div {
  padding: 20px;
}

.container .name { background: orange; }
.container .photo { background: yellow; }
.container .price { background: purple; }
.container .description { background: blue; }

@media (min-width: 768px) {
  .container {
    display: grid;
    /* 分成两等宽列 */
    grid-template-columns: 1fr 1fr;
    /* 用网格区域定义元素位置，完全适配原有HTML顺序 */
    grid-template-areas:
      "name name"
      "photo price"
      "description price";
    /* 移除网格间默认间隙 */
    grid-gap: 0;
  }

  .container .name {
    grid-area: name;
  }

  .container .photo {
    grid-area: photo;
    padding: 100px 20px;
    /* 移除底部padding，让description完全紧贴 */
    padding-bottom: 0;
  }

  .container .price {
    grid-area: price;
    padding: 150px 20px;
    /* 让price自动填充两行高度，避免右侧空白 */
    align-self: stretch;
  }

  .container .description {
    grid-area: description;
    /* 移除顶部padding，紧贴photo底部 */
    padding-top: 0;
  }
}

HTML 部分（完全保留原顺序） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
  <div class="name">name</div>
  <div class="photo">photo</div>
  <div class="price">price</div>
  <div class="description">description</div>
</div>
</body>
</html>

关键修改说明 #

• Grid区域定位：通过grid-template-areas，我们把name放在顶部跨两列，photo和price在第二行左右分布，description直接放在photo正下方，同时让price跨两行占据右侧区域，彻底解决了高度不等元素导致的间隙问题。
• 无间隙细节处理：设置grid-gap: 0移除网格间默认间距，再调整photo的底部padding和description的顶部padding为0，确保两者完全紧贴没有空白。
• HTML顺序不变：Grid的区域定位不需要调整原有元素的顺序，完全符合你的限制条件。

这样修改后，两个布局问题就都完美解决啦！

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