flexbox网格中的图像[重复]答案

【问题标题】：Images in a flexbox grid [duplicate]flexbox网格中的图像[重复]
【发布时间】：2021-05-16 07:36:14
【问题描述】：

我试图用两列的 flexbox 创建一个图像网格。在第一列中，我放置了一个图像（600x600px），在第二列中，我为每行放置了 4 个图像（300x300px）2。

在第二列中，图像之间有一些空间会产生交错的结果。这是我正在测试的代码，如何删除图像之间的空白？感谢您的帮助

/* ! Grid System */
.grid { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row; flex-wrap: nowrap;}
.grid-wrap{flex-wrap: wrap;}
.grid-horizontal{display: flex; flex-flow: row; flex-wrap: nowrap; border: solid 1px yellow; }
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-50 { width: 50%; }
  .tab-100 { width: 100%; }
}

@media (max-width: 580px) {
  .grid--sma{flex-wrap: wrap;}
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }

  .sma-hide{display:none}
}

  <div class="container" style="border:solid 1px red; height:auto">
    <div class="grid grid--sma" style="max-height:2600px">
      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-big.jpg" alt="" style="width:100%">

      </div>

      <div class="col-50 sma-100" style=" border:solid 1px black;">

        <img src="img/Square-small-1.jpg" alt="" style="width:49%">
        <img src="img/Square-small-2.jpg" alt="" style="width:49%">

        <img src="img/Square-small-2.jpg" alt="" style="width:49%">
        <img src="img/Square-small-1.jpg" alt="" style="width:49%">

      </div>


    </div>

【问题讨论】：

标签： html css image flexbox gallery

【解决方案1】：

您会看到图像之间的间隙，因为默认情况下它们是内联元素。所有内联元素的行为都是这样的。

使用 Flexbox 修复

使您的图像成为块元素，并在父元素上创建弹性框网格

.col-50 img {
  display: block;
}

.col-50 {
  display: flex;
  flex-wrap: wrap;
}

一旦你使用了 flexbox，你就可以从你的图像的 HTML 代码中删除 style="width:49%" 并且只需将以下行添加到 CSS 中：

.col-50 img {
  ...
  width: 50%;
  ...
}

【讨论】：