图片落在 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 设备在列中正确显示图像。

图片落在 iOS 的 css 列之外

Images falling outside css columns on iOS

css

twitter-bootstrap

css-multicolumn-layout