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
Sinistrus Messages postés 1010 Date d'inscription Statut Membre Dernière intervention - 16 juin 2017 à 17:28
5 réponses
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 :
Bonne journée,
<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,
Salut,
Peux t-on voir le code html correspondant ?
Bonne journée,
Peux t-on voir le code html correspondant ?
Bonne journée,
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>
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...
A l'exception du fichier include("config.php"), tout mon code y est.
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.
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
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je ne connaissais vraiment pas break-inside !
En tout cas merci de ton aide Pitet ! Tout fonctionne parfaitement bien maintenant !
Voici le code final :
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>