通过父元素class实现图片并排及单星星图复用为6个展示

问题1：如何通过父元素的class实现两张图片并排排列？ #

可以借助CSS Flexbox布局快速实现，只需给父元素添加display: flex属性，子级图片就会自动在同一行排列：

/* 用于实现双图并排的父元素类名，可自定义 */
.img-group {
  display: flex;
  gap: 8px; /* 可选：设置图片间的间距，按需调整 */
}

对应HTML示例：

<div class="img-group">
  <img src="image/pic1.jpeg" alt="图片1">
  <img src="image/pic2.jpeg" alt="图片2">
</div>

问题2：如何通过父元素的class将单张星星图片复用并排列为6个展示？ #

以下提供两种实现方案，适配不同场景需求：

方案1：基于现有6个<img>标签实现并排排列 #

针对你给出的HTML结构，通过父元素的Flex布局控制星星横向排列，同时统一星星尺寸：

.stars {
  display: flex;
  gap: 4px; /* 星星之间的间距，可按需修改 */
  align-items: center;
}
.stars img {
  width: 20px; /* 设置星星的统一宽度，高度自动按比例缩放 */
  height: auto;
}

方案2：仅用单张图片，通过CSS生成6个星星（简化HTML代码） #

如果想真正复用单张图片、减少冗余HTML标签，可只保留父元素，通过CSS伪元素和子元素生成6个星星容器并设置背景图：

.stars {
  display: flex;
  gap: 4px;
}
.stars::before,
.stars::after,
.stars span {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("image/stars.jpeg");
  background-size: cover;
}

对应简化后的HTML：

<div class="stars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

效果参考：

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