Masonry [Résolu]

Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - 15 juin 2017 à 01:31 - Dernière réponse : Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention
- 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 : http://w3bits.com/labs/css-masonry/

Avez-vous une idée pour corriger cela ?

Merci d'avance

Afficher la suite 

9 réponses

Répondre au sujet
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 16 juin 2017 à 09:29
+1
Utile
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,
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Pitet
Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - 15 juin 2017 à 10:36
0
Utile
je crois que le problème vient de Chrome...
Commenter la réponse de Sinistrus
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 15 juin 2017 à 14:55
0
Utile
1
Salut,

Peux t-on voir le code html correspondant ?

Bonne journée,
Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - 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>
Commenter la réponse de Pitet
Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - 16 juin 2017 à 10:49
0
Utile
3
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.
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 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) ?
Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - 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 :$
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 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
Commenter la réponse de Sinistrus
Sinistrus 859 Messages postés mercredi 12 décembre 2007Date d'inscription 17 décembre 2017 Dernière intervention - Modifié par Sinistrus le 16/06/2017 à 18:02
0
Utile
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>
Commenter la réponse de Sinistrus