Использование столбцов CSS для сетки изображений, иногда изображения складываются - PullRequest
0 голосов
/ 31 мая 2019

Я использую методику, описанную здесь , и у меня возникает проблема, когда иногда изображения располагаются в столбцах, как и предполагалось, но иногда они складываются друг под другом, а это не то, что я хочу.

Я попытался добавить white-space:nowrap, который заставляет изображения отображаться в одной строке, но он также удаляет column-gap и выравнивает изображения влево, а не по центру.

Я создал Codepen , который иллюстрирует проблему. Набор 1 стеков (плохо), Набор 2 в столбцах (хорошо).

У кого-нибудь есть идея, почему два набора изображений ведут себя по-разному, и есть способ их решения, который также не жертвует разрывом и выравниванием?

1 Ответ

1 голос
/ 31 мая 2019

Попробуйте добавить float:left к img

.img-columns {
  column-gap: 1rem;
  column-count: 2;
  white-space: normal;
}

.img-columns img {
  float: left;
}
<link href="https://andersons.tyssendesign.com.au/assets/css/site.combined.min.css" rel="stylesheet" />
<div class="container mx-auto px-6">
  <div class="clearfix">
    <h1 class="px-6 mb-6">Set 1</h1>
    <div class="px-6 md:float-none md:w-full mb-4  mx-auto  text-center img-columns">
      <img class="img-content lazyloaded" src="https://andersons.tyssendesign.com.au/site/assets/files/1387/s-fold-blog-1.480x0.jpg">
      <img class="img-content  lazyloaded" src="https://andersons.tyssendesign.com.au/site/assets/files/1387/s-fold-blog-2.480x0.jpg">
    </div>

    <h1 class="px-6 mb-6">Set 2</h1>
    <div class="px-6 md:float-none md:w-full mb-4  mx-auto  text-center img-columns">
      <img class="img-content lazyloaded" src="https://andersons.tyssendesign.com.au/site/assets/files/1363/bauhaus.480x0.jpg">
      <img class="img-content lazyloaded" src="https://andersons.tyssendesign.com.au/site/assets/files/1363/matka.480x0.jpg">
      <img class="img-content lazyloaded" src="https://andersons.tyssendesign.com.au/site/assets/files/1363/yokun.480x0.jpg">
    </div>

  </div>
</div>
...