Masonry
Résolu/Fermé
Sinistrus
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
-
15 juin 2017 à 01:31
Sinistrus Messages postés 1010 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 16 juin 2017 à 17:28
Sinistrus Messages postés 1010 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 16 juin 2017 à 17:28
5 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
16 juin 2017 à 09:29
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 :
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,
Sinistrus
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
17
15 juin 2017 à 10:36
15 juin 2017 à 10:36
je crois que le problème vient de Chrome...
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
15 juin 2017 à 14:55
15 juin 2017 à 14:55
Salut,
Peux t-on voir le code html correspondant ?
Bonne journée,
Peux t-on voir le code html correspondant ?
Bonne journée,
Sinistrus
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
17
15 juin 2017 à 16:22
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>
Sinistrus
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
17
16 juin 2017 à 10:49
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...
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.
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
16 juin 2017 à 16:45
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) ?
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
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
17
16 juin 2017 à 16:53
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 :$
Je t'ai envoyé le lien de ma page en privé si ça ne te dérange pas de la voir :$
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
16 juin 2017 à 17:17
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
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Sinistrus
Messages postés
1010
Date d'inscription
mercredi 12 décembre 2007
Statut
Membre
Dernière intervention
6 juin 2023
17
Modifié le 16 juin 2017 à 18:02
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 :
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>