Ma Flex Gallery fonctionne bien, le seul problème est que lorsque je mets des balises <a> 标签添加到 <img> autour, tout est gâché.
Lorsque j'utilise la balise <a> 标签包裹 <img> pour pouvoir ouvrir l'image en taille réelle, cela finit par gâcher tout le design, je suis sûr que quelque chose dans mon CSS l'a gâché, comment puis-je y remédier
html,
body,
h1,
h2,
section,
div {
margin: 0;
padding: 0;
}
body {
max-width: 76.5rem;
padding: clamp(0.5rem, 2vw, 2rem);
margin: auto;
}
.gallery {
margin-top: 2rem;
}
.gallery>div {
columns: 16em;
gap: 1.25rem;
padding-top: 1.25rem;
}
.gallery img {
display: block;
width: 100%;
margin-bottom: 1.25rem;
}
<section class="gallery">
<h2>Gallery Title Here</h2>
<div>
<img src="https://source.unsplash.com/OyCl7Y4y0Bk" alt="">
<img src="https://source.unsplash.com/Kl1gC0ve620" alt="">
<img src="https://source.unsplash.com/55btQzyDiO8" alt="">
<img src="https://source.unsplash.com/g0dBbrGmMe0" alt="">
<img src="https://source.unsplash.com/v1OW17UcR-Q" alt="">
<img src="https://source.unsplash.com/Wpg3Qm0zaGk" alt="">
<img src="https://source.unsplash.com/W3FC_bCPw8E" alt="">
<img src="https://source.unsplash.com/rBRZLPVLQg0" alt="">
<img src="https://source.unsplash.com/RRksEVVoU8o" alt="">
</div>
</section>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Fonctionne bien pour moi. Les ancres ne marquent aucune différence.
html, body, h1, h2, section, div { margin: 0; padding: 0; } body { max-width: 76.5rem; padding: clamp(0.5rem, 2vw, 2rem); margin: auto; } .gallery { margin-top: 2rem; } .gallery>div { columns: 16em; gap: 1.25rem; padding-top: 1.25rem; } .gallery img { display: block; width: 100%; margin-bottom: 1.25rem; }<section class="gallery"> <h2>Gallery With Links</h2> <div> <a href="google.com"><img src="https://source.unsplash.com/OyCl7Y4y0Bk"></a> <a href="google.com"><img src="https://source.unsplash.com/Kl1gC0ve620"></a> <a href="google.com"><img src="https://source.unsplash.com/55btQzyDiO8"></a> <a href="google.com"><img src="https://source.unsplash.com/g0dBbrGmMe0"></a> <a href="google.com"><img src="https://source.unsplash.com/v1OW17UcR-Q"></a> <a href="google.com"><img src="https://source.unsplash.com/Wpg3Qm0zaGk"></a> <a href="google.com"><img src="https://source.unsplash.com/W3FC_bCPw8E"></a> <a href="google.com"><img src="https://source.unsplash.com/rBRZLPVLQg0"></a> <a href="google.com"><img src="https://source.unsplash.com/RRksEVVoU8o"></a> </div> </section> <section class="gallery"> <h2>Gallery Without Links</h2> <div> <img src="https://source.unsplash.com/OyCl7Y4y0Bk"> <img src="https://source.unsplash.com/Kl1gC0ve620"> <img src="https://source.unsplash.com/55btQzyDiO8"> <img src="https://source.unsplash.com/g0dBbrGmMe0"> <img src="https://source.unsplash.com/v1OW17UcR-Q"> <img src="https://source.unsplash.com/Wpg3Qm0zaGk"> <img src="https://source.unsplash.com/W3FC_bCPw8E"> <img src="https://source.unsplash.com/rBRZLPVLQg0"> <img src="https://source.unsplash.com/RRksEVVoU8o"> </div> </section>