是否有办法添加链接到flexbox图像?

Question

此方法适用于(没有链接的图像):

<div id="gallery">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
</div>

#gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}

#gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}

这完全搞乱了。css(带有链接的图像):

<div id="gallery">
<a href="1.jpg"><img src="1.jpg"/></a>
<a href="2.jpg"><img src="2.jpg"/></a>
<a href="3.jpg"><img src="3.jpg"/></a>
<a href="4.jpg"><img src="4.jpg"/></a>
</div>

唯一使它稍微好一点的是添加:

#gallery a {
width: 100%;
}

但是它只是一个垂直的图像堆栈。
所以flexbox只是不允许图像作为链接?

Answer 1

你需要重新应用从img到a的样式，因为flexbox只适用于直接子元素

#gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
#gallery a {
width: 25%;
height: 300px;
margin-top: 8px;
padding: 0 4px;
box-sizing: border-box;
}
#gallery img {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
}

<div id="gallery">
<a href="1.jpg"><img src="https://picsum.photos/200/300?random=1" /></a>
<a href="2.jpg"><img src="https://picsum.photos/200/300?random=2" /></a>
<a href="3.jpg"><img src="https://picsum.photos/200/300?random=3" /></a>
<a href="4.jpg"><img src="https://picsum.photos/200/300?random=4" /></a>
</div>