使用CSS列进行图像网格处理，有时会堆积图像

Question

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

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

我创建了一个Codepen来说明问题。 设置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>