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

使图像网格正确响应时出现问题。有两列堆积不正确

1 个答案: