CSS实现一个DIV时占100%宽度，大于等于2个时，则占50%

时间：2025-09-27 访问量：0

项目需求，在某个详情页中，调用多图显示。

但是由于不确定多图的数量，有可能只有一张，有可能是多张。

默认设计的是图片占用50%，一行两张图片。

但是如果图片数量比较少，只有一张的时候，也只占用50%的话，则显示效果不佳。

但是程序PICS又无法通过代码来判断数量。

这个时候我们可以通过CSS来控制。

先是HTML代码：

<div class="picsauto">
    <div class="picsauto-list"><img src="1.jpg" alt=""></div>
</div>

然后是CSS样式：

.picsauto {
  display: flex; /* 让子元素横向排列 */
  flex-wrap: wrap; /* 多个时能换行 */
  margin-right: -5px;
    margin-left: -5px;
}

/* 默认情况：多个的时候 */
.picsauto .picsauto-list {
  flex: 0 0 50%;   /* 占据 50% 宽度 */
  box-sizing: border-box;
      padding-right: 5px;
    padding-left: 5px;
}

/* 只有一个子元素时 */
.picsauto .picsauto-list:only-child {
  flex: 0 0 100%;  /* 占据 100% 宽度 */
  padding-right: 5px;
    padding-left: 5px;
}

这样就实现了我们想要的效果。