图像落在 iOS 上的 css 列之外

Question

我正在使用 CSS 列来显示各种宽度和高度的图像，以便它们一起流动而没有大的空白。它在桌面浏览器上完美运行，但在 iPad 和 iPhone（使用 iOS Chrome）上，列表中的最后一张图片位于列之外，出现在列容器的右侧。

我一直在对属性进行故障排除，无法让 iOS 服从。

示例页面：https://gohbavote.ca/round-1/entry-26

这是 HTML：

<div class="post-gallery">
  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

  <a href="[full img url]" data-lightbox="[lightbox-tag]" class="lightbox-item">
    <img src="[thumb img url]" class="lightbox-img" alt="">
  </a>

</div><!-- .post-gallery -->

CSS：

.post-gallery {
    display: block;
    float: left;
    line-height: 0;
    min-height: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 0px;
    -moz-column-count: 2;
    -moz-column-gap: 0px;
    column-count: 2;
    column-gap: 0px;
    width: 540px;
    border: 4px solid red; /* so you can see the boundaries of the container */
}
.lightbox-item {
    display: block; 
    float: left; 
    padding: 8px; 
    width: 100%;
    height: auto;
}
.lightbox-img {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

你能看到我遗漏的东西吗？ iOS 是否需要一些特殊设置才能与列正常工作？还是我的 CSS 应该受到责备？如果相关，该网站建立在 Bootstrap 3.3.7 之上。

Answer 1

问题在于 .lightbox-item 设置为 display:block 和 float:left。一旦我将它们设置为 display:inline-block 和 float:none，iOS 设备就会在列中正确显示图像。