我的 Flex Gallery 運作良好，唯一的問題是當我將 <a> 標籤加入 <img> 標籤周圍時，一切都變得混亂。
當我用<a> 標籤包裹<img> 標籤以便我可以打開全尺寸圖像時，它最終會弄亂整個設計，我確信我的CSS 中的某些內容弄亂了它，如何修復它
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>