Задать вопрос
@greenline111
html

Ломается плиточная раскладка, как исправить?

5fa09665d9914375408647.png
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <style>
.catalog-tabs__wrap {
  columns: auto 200px;
  column-gap: 12px;
  width: 100%;
}
.blocks-catalog {
  //display: flex;
  //flex-direction: row;
  //flex-wrap: wrap;

  columns: auto 200px;
  column-gap: 12px;
  width: 100%;
}

.catalog-brand____logo {
  min-width: 80px;
  width: 80px;
  border: 1px solid #d5d5d5;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 32px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 15px;
}

.blocks-catalog .catalog-brand____logo {
  width: 45px;
  margin-top: 5px;
  min-width: 45px;
  margin-right: 10px;
  height: 18px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.catalog-brand___img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.catalogs_blocks {
  display: inline-block;
 
}
    </style>
</head>
<body>
  
  <div class="blocks-catalog" id="catalog-3">
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">A</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">B</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">C</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">D</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">E</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">F</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">G</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">H</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">I</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">J</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">K</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">L</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">M</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">N</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">O</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">P</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">Q</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
    <div class="catalogs_blocks">
      <div class="catalog-brand__letter">R</div>
      <div class="catalog-brand__item">
        <div class="catalog-brand____logo"><img class="catalog-brand___img" src="logo-1.png" alt="alt"></div>
        <div class="catalog-brand__title"><a class="link" href="#">Acer</a></div>
      </div>
    </div>
      </div>
    </div>
  </div>
      
</body>
</html>
  • Вопрос задан
  • 75 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Rufix 
.catalog_blocks {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid-column;
    display: table;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы