Masonry

Résolu
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   -  
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre 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 : 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   Statut Membre Dernière intervention   526
 
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 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
je crois que le problème vient de Chrome...
0
Réponse 3 / 5
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   526
 
Salut,

Peux t-on voir le code html correspondant ?

Bonne journée,
0
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
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 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
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   Statut Membre Dernière intervention   526
 
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 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
Ç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   Statut Membre Dernière intervention   526
 
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 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
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