我正在使用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/

10-12 12:38
查看更多