我正在使用here所述的技术,但遇到了一个问题,有时图像会按预期排列在各列中,但有时它们堆叠在彼此的下面,这不是我想要的。
我尝试添加white-space:nowrap
来使图像显示在同一行上,但是它也删除了column-gap
并使图像左对齐而不是居中对齐。
我创建了一个Codepen来说明问题。设置1堆栈(坏),设置2列(好)。
任何人都知道为什么两组图像的行为会有所不同,并且找到一种解决方案又不牺牲间隙和对齐方式吗?
最佳答案
尝试将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>
关于html - 使用CSS列进行图像网格处理,有时会堆积图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56387206/