如何实现每张图片下方标签每行最多3个（仅HTML+CSS）

先给你一套适配需求的代码，你可以根据自己的实际HTML结构调整选择器：

示例HTML结构 #

如果你的结构和下面不一样，只需要对应修改CSS选择器即可：

<div class="gallery">
  <div class="image-group">
    <img src="your-image.jpg" alt="图片描述">
    <div class="tags">
      <span class="tag">标签1</span>
      <span class="tag">标签2</span>
      <span class="tag">标签3</span>
      <span class="tag">标签4</span>
    </div>
  </div>
  <!-- 重复更多图片组 -->
</div>

CSS实现代码 #

/* 小屏幕默认样式（移动端/平板） */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 1rem;
}

.image-group {
  text-align: center;
}

.image-group img {
  width: 100%;
  height: auto;
}

.tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.tag {
  /* 满足至少一条边框的要求，这里用全边框，也可以只设单条比如border-bottom */
  border: 1px solid #666;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
}

/* 1280px断点后的桌面端样式 */
@media (min-width: 1280px) {
  /* 图片组每行3组 */
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 标签每行最多3个：用grid固定3列，超出自动换行 */
  .tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  /* 标签数量不足3个时居中显示 */
  .tag {
    justify-self: center;
  }
}

关键说明 #

• 图片组用Grid布局的repeat(3, 1fr)，能自动平分每行空间，实现每行3组的效果
• 标签在断点后改用Grid固定3列，不管标签数量多少，每行最多只会显示3个，多余的自动换到下一行
• 标签的边框直接通过border属性设置，你可以根据需求改成单条边框（比如border-bottom: 1px solid #666）
• 如果你的标签是用<ul><li>结构，只需要把.tags换成.tags ul，.tag换成.tags li，逻辑完全一致

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