我的 Flex Gallery 运行良好，唯一的问题是当我将 <a> 标签添加到 <img> 标签周围时，一切都变得混乱。
当我用 <a> 标签包裹 <img> 标签以便我可以打开全尺寸图像时，它最终会弄乱整个设计，我确信我的 CSS 中的某些内容弄乱了它，如何修复它
1
882html,
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
对我来说效果很好。锚标记零差异。
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>