css怎么做并排图片

如何使用 CSS 实现并排图片呢？其实是可以通过简单的 CSS 代码来实现的。

.img-container {
       display: flex;
       flex-wrap: wrap;
}
.img-wrapper {
       flex: 1 1 30%;
     /* 三张图占据整个容器的 30% */   margin: 10px;
       position: relative;
}
.img-wrapper img {
       width: 100%;
}
.img-wrapper .caption {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       padding: 10px;
       color: #fff;
}
    

上述 CSS 代码中，首先需要创建一个容器，可以使用 flex 布局，然后通过 flex-wrap 属性实现换行。接着，每个图片需要再嵌套一个容器，以实现图片和文字的配合。通过设置图片容器的 flex 属性，可以将三张图片等分占据总容器的 30%。最后，为了美观起见，可以在每个图片容器中添加一个黑色半透明的文字介绍框。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！