Galeri Flex saya berfungsi dengan baik, satu-satunya masalah ialah apabila saya meletakkan <a> 标签添加到 <img> tag di sekeliling semuanya menjadi kacau.
Apabila saya menggunakan tag <a> 标签包裹 <img> supaya saya boleh membuka imej bersaiz penuh, ia akhirnya mengacaukan keseluruhan reka bentuk, saya pasti sesuatu dalam CSS saya mengacaukannya, bagaimana saya boleh membetulkannya
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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Berfungsi dengan baik untuk saya. Sauh menandakan perbezaan sifar.
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>