Meine Flex-Galerie funktioniert einwandfrei, das einzige Problem ist, dass alles durcheinander gerät, wenn ich <a> 标签添加到 <img>-Tags darum herum setze.
Wenn ich das <a> 标签包裹 <img>-Tag verwende, damit ich das Bild in voller Größe öffnen kann, bringt das am Ende das gesamte Design durcheinander. Ich bin mir sicher, dass irgendetwas in meinem CSS das durcheinander gebracht hat. Wie kann ich das beheben
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>
对我来说效果很好。锚标记零差异。
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>