Sujet Précédent Sujet Suivant

Masonry

Résolu/Fermé
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 - 15 juin 2017 à 01:31
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 - 16 juin 2017 à 17:28
Bonjour à tous !

Je rencontre un petit soucis avec le Masonry.
En fait il est un peu décalé comme sur cette image :
https://img4.hostingpics.net/pics/806874mansoryfw.png

Voici mon CSS :
img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;-moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial; z-index:999999999;}
.masonry .brick {margin-bottom: 10px; display:block; overflow:hidden;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.masonry .brick:hover img {opacity: .75;}
.masonry.bordered {-moz-column-rule: 1px solid #eee;-webkit-column-rule: 1px solid #eee;column-rule: 1px solid #eee;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;}
.masonry.bordered .brick {padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #eee;}
.masonry.gutterless {-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;}
.masonry.gutterless .brick {margin-bottom: 0;}

@media only screen and (min-width: 1024px) {
.masonry {-moz-column-count: 5;-webkit-column-count: 5;column-count: 5;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
}


Et voici d'où j'ai tiré mon code : https://w3bits.com/labs/css-masonry/

Avez-vous une idée pour corriger cela ?

Merci d'avance

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
16 juin 2017 à 09:29
Il faut déplacer le style déclaré sur le div dans brick directement sur la balise image et ajouter un box-sizing pour ne pas couper l'image : 

<div class="masonry">

<div class="brick">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

<div class="brick">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

</div>



img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;-moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial; z-index:999999999;}
.masonry .brick {margin-bottom: 10px; display:block; overflow:hidden;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out; 
/* ajout*/
background:#EFEFEF; border:1px solid #A7A7A7; padding: 10px; box-sizing: border-box; }
.masonry .brick:hover img {opacity: .75;}
.masonry.bordered {-moz-column-rule: 1px solid #eee;-webkit-column-rule: 1px solid #eee;column-rule: 1px solid #eee;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;}
.masonry.bordered .brick {padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #eee;}
.masonry.gutterless {-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;}
.masonry.gutterless .brick {margin-bottom: 0;}

@media only screen and (min-width: 1024px) {
.masonry {-moz-column-count: 5;-webkit-column-count: 5;column-count: 5;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
}


Bonne journée,
1
Réponse 2 / 5
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 17
15 juin 2017 à 10:36
je crois que le problème vient de Chrome...
0
Réponse 3 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
15 juin 2017 à 14:55
Salut,

Peux t-on voir le code html correspondant ?

Bonne journée,
0
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 17
15 juin 2017 à 16:22
Oui bien sur, le voilà : 
<div class="masonry">

<div class="brick">
<div style="background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
</div>

<div class="brick">
<div style="background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
</div>

</div>
0
Réponse 4 / 5
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 17
16 juin 2017 à 10:49
Merci Pitet,

Il y a une nette amélioration en effet. Mais lorsque je met 6 colonnes au lieu de 5, il fait pareil problème.... et sur mobile aussi, 2 colonnes il fait pareil... 

<style>
.masonry img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px; -moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial;}
.masonry .brick {margin-bottom: 10px;background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;box-sizing: border-box;}
.masonry .brick:hover img {opacity: .75;}

@media (min-width:300px) {.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2;}}
@media (min-width:480px) {.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3;}}
@media (min-width:600px) {.masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media (min-width:801px) {.masonry{-moz-column-count:5;-webkit-column-count:5;column-count:5;}}
@media (min-width:1025px){.masonry{-moz-column-count:6;-webkit-column-count:6;column-count:6;}}
</style>

<div class="masonry">
<?php $Stat = $pdo->query("SELECT * FROM tb_fr_produits ORDER BY Code ASC"); while($data = $Stat->fetch(PDO::FETCH_ASSOC)){ ?>
<div class="brick">
<img src="images/produits/<?php echo $data["Code"]; ?>.png">
<div align="center" style="padding-top:10px;"><?php echo $data["Code"]; ?><br><?php echo $data["Libelle"]; ?><br><?php echo $data["Contenance"]; ?></div>
</div>
<?php } ?>
</div>


A l'exception du fichier include("config.php"), tout mon code y est.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
16 juin 2017 à 16:45
N'ayant pas accès à ta bdd je ne peux pas tester la requête et voir le résultat html.

Peux tu stp copier seulement le code html généré par ton php (en passant par exemple par "Voir le code source de la page" de ton navigateur) ?
0
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 17
16 juin 2017 à 16:53
Ça sera top "gros" :D
Je t'ai envoyé le lien de ma page en privé si ça ne te dérange pas de la voir :$
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
16 juin 2017 à 17:17
Ton problème devrait être résolu en ajoutant la propriété css break-inside: avoid; sur la classe .brick
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Sinistrus Messages postés 1008 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 2 février 2023 17
Modifié le 16 juin 2017 à 18:02
Je ne connaissais vraiment pas break-inside !
En tout cas merci de ton aide Pitet ! Tout fonctionne parfaitement bien maintenant !

Voici le code final : 
.masonry img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px; -moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial;}
.masonry .brick {margin-bottom: 10px;background:#EFEFEF; border:1px solid #A7A7A7; padding:10px; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;box-sizing: border-box;}
.masonry .brick:hover img {opacity: .75;}

@media (min-width:300px) {.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2;}}
@media (min-width:480px) {.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3;}}
@media (min-width:600px) {.masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media (min-width:801px) {.masonry{-moz-column-count:5;-webkit-column-count:5;column-count:5;}}
@media (min-width:1025px){.masonry{-moz-column-count:6;-webkit-column-count:6;column-count:6;}}


<div class="masonry">
<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>

<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>

<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>
</div>
0