Images tombant en dehors des colonnes css sur iOS

Question

J'utilise des colonnes CSS pour afficher des images de largeurs et de hauteurs variées afin qu'elles s'écoulent ensemble sans grands espaces blancs. Il fonctionne parfaitement sur les navigateurs de bureau, mais sur iPad et iPhone (utilisant iOS Chrome), les dernières images de la liste tombent en dehors des colonnes, apparaissant à droite du conteneur à colonnes.

J'ai résolu les problèmes et je ne peux pas faire obéir iOS.

page Exemple: https://gohbavote.ca/round-1/entry-26

Voici le code 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%; 
} 

Pouvez-vous voir quelque chose que je suis absent? IOS a-t-il besoin d'une configuration spéciale pour fonctionner correctement avec les colonnes? Ou est-ce que mon CSS est à blâmer? Dans le cas où c'est pertinent, le site est construit sur Bootstrap 3.3.7.

Answer 1

Le problème était que .lightbox-item était configuré pour afficher: block et float: left. Une fois que j'ai défini ces paramètres pour afficher: inline-block et float: none, les appareils iOS affichaient les images correctement dans les colonnes.