Créer des bordures autour d'éléments de différentes hauteurs

Question

J'utilise React-photo-album pour créer un album photo sur mon site Web.

Je me demandais s'il était possible de définir une bordure CSS autour de la photo en bas, mais de suivre les côtés pour tenir compte des différentes hauteurs ?

Qu'est-ce qui est actuellement :

J'imagine quelque chose comme ceci :

J'ai pu l'obtenir en utilisant :last-child sur la classe React-photo-album--column :

Mais tout ce que j'essaie entraîne simplement une bordure autour de l'ensemble du conteneur au lieu de la seule photo en bas.

J'ai stylisé l'autre côté :

.react-photo-album {
    border-radius: 5px;
    border: 4px solid #86afe1;
    border-bottom: 0;
    padding: 3rem 2rem 2rem;
}

Et vous pouvez voir le HTML du conteneur ici, mon idée est de cibler le dernier enfant de chaque colonne d'album photo React, je ne sais tout simplement pas comment gérer les côtés.

Answer 1

Vous pouvez placer des bordures sur les côtés et en bas du div du conteneur photo. Donnez ensuite à ces div la même couleur d'arrière-plan que l'arrière-plan global (bleu) et superposez-les avec la bordure que vous souhaitez masquer. Donc en gros :

• Votre div conteneur a un rembourrage de 2rem
• Chaque conteneur a un indice z plus élevé que le conteneur à sa gauche (pour assurer le chevauchement)
• Chaque conteneur a un fond bleu
• Chaque conteneur sauf le premier a une marge gauche de -2rem pour dépasser la bordure du conteneur vers sa gauche

Éditeur : En y repensant, cela ne fonctionne que si le conteneur est plus court que le précédent. Vous pouvez résoudre ce problème en écrivant une fonction en javascript qui vérifie si le conteneur est plus long ou plus court que les conteneurs précédents et suivants. Sur cette base, vous pouvez utiliser ou non des bordures de chaque côté (via des classes supplémentaires appliquées au conteneur).