无法正确响应地制作图像网格堆栈。有两列堆叠不正确

Question

我正在尝试使此图像网格堆栈响应地在 1224 像素时为 33.33%，在 720 像素或更低时为 50%。我想我在 CSS 中遗漏了一些东西，但我还是个新手，所以如果有人能提供帮助，我将不胜感激。

我想确保移动设备、平板电脑等上的页面堆栈上的客户端徽标。目前，当窗口最小化时，其中两列开始重叠。似乎因为其中一列只包含 3 张图片而其他列包含 4 张图片，所以由于某种原因，三张图片列不符合我创建的 CSS 规则。

非常感谢任何和所有帮助。

这是我得到的：

/* five column GRID STYLES
    -----------------------------------------------------------------*/

.column {
  float: left;
  position: relative;
  line-height: 1em;
}

.column {
  width: 20%;
}

.item:last-child {
  display: block;
}

@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .column {
    width: 33.33%;
  }
  .column:last-child {
    display: none;
  }
}

@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .column {
    width: 50%;
  }
  .column:last-child {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .column {
    width: 100%;
  }
}

.image {
  max-width: 100%;
  margin: 0;
  display: block;
}

.image:after {
  clear: both;
}

<div class="row">

  <div class="column">
    <a href="https://www.theorthodoc.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Busciglio_S4AC.png" style="width:100%"></a>

    <a href="https://canalesortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Canales_S4AC.png" style="width:100%"></a>

    <a href="https://chadwellsmiles.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Chadwell_S4AC.png" style="width:100%"></a>

    <a href="https://www.embraceyoursmile.us/" target="_blank"><img src="https://www.smiles4acure.com/images/Culberson_S4AC.png" style="width:100%"></a>
  </div>

  <div class="column">
    <a href="https://eckleyorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Eckley_S4AC.png" style="width:100%"></a>

    <a href="https://www.fritzorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Fritz_S4AC.png" style="width:100%"></a>

    <a href="http://www.pittmanortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Pittman_S4AC.png" style="width:100%"></a>

    <a href="https://tlortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/logos_pin_seperate.png" style="width:100%"></a>
  </div>

  <div class="column">
    <a href="https://grafortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Graf_S4AC.png" style="width:100%"></a>

    <a href="https://www.hassfamilyorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Hass_S4AC.png" style="width:100%"></a>

    <a href="http://www.hatcherorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Hatcher_S4AC.png" style="width:100%"></a>

    <a href="https://www.harveyandthomasortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/HT_S4AC.png" style="width:100%"></a>
  </div>

  <div class="column">
    <a href="https://www.tkoenortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Koen_S4AC.png" style="width:100%"></a>

    <a href="https://limbaughortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Limbaugh_S4AC.png" style="width:100%"></a>

    <a href="https://mckoenortho.com/" target="_blank"><img src="https://www.smiles4acure.com/images/MCK_S4AC.png" style="width:100%"></a>

    <a href="https://celebrating-smiles.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Paciorek_S4AC.png" style="width:100%"></a>
  </div>

  <div class="column">
    <a href="https://herrmannorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Rick_Herrmann_S4AC.png" style="width:100%"></a>

    <a href="https://simsorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Sims_S4AC.png" style="width:100%"></a>

    <a href="https://www.tariorthodontics.com/" target="_blank"><img src="https://www.smiles4acure.com/images/Tari_S4AC.png" style="width:100%"></a>
  </div>
</div>
</div>

Answer 1

您可以使用 Flexbox 和 Viewport，如果您想尝试，这里有一些 W3Schools 的指南： https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_rwd_viewport.asp