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に設定されていたことです。 inline-blockとfloat：noneを表示するように設定すると、iOSデバイスは画像を正しく列に表示します。