Question

I'm using pure CSS (Bootstrap 4) to display a tiled gallery. To do this, I'm using the flexbox elements from Bootstrap (d-flex and flex-wrap).

Everything works fine if I only use <img>-tags. But I want to wrap the images with an <a>-tag to link to a lightbox. If I do this, the gallery breaks.

Here's an example of my code: https://codepen.io/cray_code/pen/RMrbzK

的平铺图库

我能做些什么吗？我试图使用img中的CSS，但它不起作用。

作为可选问题：是否可以强制图库显示在两列中？最后一张图像几乎是正方形，但显示为宽屏矩形。

Answer 1

如果您将<a>标记设为弹性项目和弹性容器，则可以实现所需。所以尝试添加这种风格：

.img-gallery a {
    flex-grow: 1;
    display:flex;
}

这是更新的CodePen

Answer 2

制作锚点display:flex：

https://codepen.io/anon/pen/rdxNLX

.img-gallery img {object-fit: cover; height: 200px; flex-grow: 1;}

.img-gallery > a {
    vertical-align:middle;
    flex-grow: 1;
    margin: 2px; 
    display: flex;
}

带有<a>-tag around images

2 个答案: