Возникли проблемы с правильной адаптацией сетки изображений.Есть две колонки, неправильно складывающиеся - PullRequest
Новая
       7

Возникли проблемы с правильной адаптацией сетки изображений.Есть две колонки, неправильно складывающиеся

0 голосов
/ 03 октября 2018

Я пытаюсь сделать так, чтобы эта сетка изображений отвечала на 33.33% при 1224px и 50% при 720px и ниже.Я думаю, что мне чего-то не хватает в 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>

1 Ответ

0 голосов
/ 03 октября 2018

Вы можете использовать Flexbox и Viewport , вот несколько советов в W3Schools, если вы хотите попробовать: https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_rwd_viewport.asp

...