J'essaye de créer une galerie d'image réactive. Chaque image aura un en-tête. Je les distribue en utilisant le nombre de colonnes de webkit.

Le problème est le suivant: j'ai spécifié un conteneur comme étant "relatif". À l'intérieur de ce conteneur, j'ai un en-tête "absolu" suivi d'une image. Ce qui semble se produire dans certaines valeurs de column-count, c'est que l'en-tête va dans une autre colonne et l'image dans la suivante. J'ai besoin qu'ils soient tous les deux ensemble à tout moment et je suis surpris de savoir pourquoi l'absolu dans le conteneur relatif ne fait pas cela.

Un codepen pour référence: http://codepen.io/pliablepixels/full/YwWLzy/

Le code de la galerie d'images de base est: (SO insiste pour que j'inclus un fragment de code lors de la publication d'un lien codepen, alors voici)

   <div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
       <span ng-repeat="image in images">
           <div style="position:relative">
               <div class="my_header">Header</div>
               <img class="scaled_image" src={{ image.src }} />
           </div>
       </span>
   </div>

Veuillez modifier les valeurs de colonne et noter le comportement de l'en-tête.

Comment résoudre ce problème? (Remarque je dois utiliser une balise img - impossible d'utiliser background-image)

Merci

0
user1361529 24 déc. 2015 à 15:44

2 réponses

Meilleure réponse

Colonnes

Pour protéger les éléments de la rupture et les conserver entièrement dans une colonne, vous pouvez ajouter ces propriétés:

.element {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
              page-break-inside: avoid; /* Firefox */
                   break-inside: avoid; /* IE 10+ */
}

Votre exemple fixe http://codepen.io/anon/pen/rxMWxa

En-tête

Un tel comportement se produit parce que vous avez ajouté line-height:0px à votre div de conteneur. Vous pouvez donc simplement renvoyer la valeur line-height de l'en-tête à normal. Correction de cela dans codepen.

4
Anton Gusar 31 janv. 2016 à 22:11

L'utilisation de la hauteur de ligne peut parfois causer des maux de tête. Essayez d'utiliser un rembourrage comme ci-dessous:

.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}
1
Emirhan 24 déc. 2015 à 14:46