如何将图片与描述字段对应的DIV元素顶部对齐？

针对你的DOM层级结构：

• search-gallery
  • search-result
    • gallery-img
    • search-info
      • title
      • series
      • genre
      • cast

以下几种CSS方案可以快速让gallery-img和search-info对齐到search-result容器的顶部：

方案1：Flexbox布局（推荐） #

给父容器search-result设置Flex布局，通过align-items: flex-start确保子元素顶部对齐：

.search-result {
  display: flex;
  align-items: flex-start; /* 显式指定顶部对齐，避免默认对齐方式干扰 */
  gap: 16px; /* 可选：为两个元素添加间距，根据需求调整数值 */
}

Flexbox是现代Web布局的首选方案，兼容性好且代码简洁，无需额外处理子元素的垂直对齐问题。

方案2：Grid布局 #

如果需要更灵活的网格空间分配，可使用Grid布局：

.search-result {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片容器自适应宽度，描述容器占剩余空间 */
  align-items: start;
  gap: 16px;
}

方案3：传统inline-block兼容方案 #

若需兼容老旧浏览器，可采用inline-block配合vertical-align的方式：

.search-result {
  font-size: 0; /* 消除inline-block元素间的默认空白间隙 */
}
.gallery-img, .search-info {
  display: inline-block;
  vertical-align: top; /* 核心属性：设置顶部对齐 */
  font-size: 16px; /* 恢复正常字体大小 */
}
/* 可选：设置元素宽度，根据需求调整 */
.gallery-img {
  width: 120px;
}
.search-info {
  width: calc(100% - 136px); /* 计算宽度：总宽度 - 图片宽度 - 间距 */
}

额外优化点 #

• 检查gallery-img和search-info是否存在额外的margin-top或padding-top，如有需要清除或调整；
• 若图片存在基线对齐导致的偏移，可给图片添加display: block消除影响：

.gallery-img img {
  display: block;
}

内容的提问来源于stack exchange，提问作者Michael Jason Stokes