使用css列作为图像网格，有时图像堆栈

Question

我正在使用此处描述的技术，并且遇到了一个问题，有时图像会按预期排列成列，但有时它们会堆叠在彼此下面，这不是我想要的。

我尝试添加white-space:nowrap，使图像显示在同一行上，但它也删除了column-gap并使图像左对齐而不是居中对齐。

我创建了一个代码笔来说明这个问题。设置 1 堆栈(坏(，集合 2 在列中(好(。

任何人都知道为什么两组图像的行为不同，以及一种不牺牲间隙和对齐方式的解决方法？

Answer 1

尝试将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>