如何用CSS将同class的尖刺图片并排置于Flappy Bird类游戏页面底部？

首先把所有尖刺图片放进一个容器里（比单独控制20个img更方便维护）：

<div class="spike-container">
  <img class="spike" src="spike.png">
  <img class="spike" src="spike.png">
  <!-- 剩下18个尖刺img重复粘贴在这里 -->
</div>

然后用CSS完成固定定位和紧密排列：

/* 容器固定在页面底部，宽度铺满整个页面 */
.spike-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex; /* 让尖刺自动横向并排 */
  gap: 0; /* 强制尖刺之间没有空隙 */
}

/* 单个尖刺的样式调整 */
.spike {
  display: block; /* 消除图片作为行内元素的默认微小间距 */
  height: 60px; /* 改成你需要的尖刺高度，宽度会自动按图片比例适配 */
  width: auto;
}

补充提示：

• 如果你的尖刺图片本身带有透明边距，记得用图片编辑工具裁剪掉，不然哪怕CSS设了gap:0，图片自身的透明区域还是会留出空隙。
• 要是页面出现横向滚动条，给body加一句overflow-x: hidden就能隐藏，避免尖刺超出页面范围导致滚动。

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