国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

項目需求，在某個詳情頁中，調(diào)用多圖顯示。

但是由于不確定多圖的數(shù)量，有可能只有一張，有可能是多張。

默認(rèn)設(shè)計的是圖片占用50%，一行兩張圖片。

但是如果圖片數(shù)量比較少，只有一張的時候，也只占用50%的話，則顯示效果不佳。

但是程序PICS又無法通過代碼來判斷數(shù)量。

這個時候我們可以通過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;
}

/* 默認(rèn)情況：多個的時候 */
.picsauto .picsauto-list {
  flex: 0 0 50%;   /* 占據(jù) 50% 寬度 */
  box-sizing: border-box;
      padding-right: 5px;
    padding-left: 5px;
}

/* 只有一個子元素時 */
.picsauto .picsauto-list:only-child {
  flex: 0 0 100%;  /* 占據(jù) 100% 寬度 */
  padding-right: 5px;
    padding-left: 5px;
}

這樣就實現(xiàn)了我們想要的效果。