[分享]css两排图片变成两列图片

在网站设计中，经常需要用到图片排版。如果需要将两排图片变成两列图片，则需要使用CSS来实现。下面我们来介绍如何使用CSS来实现这个效果。 .imgbox { display: flex; flexwr...

在网站设计中，经常需要用到图片排版。如果需要将两排图片变成两列图片，则需要使用CSS来实现。下面我们来介绍如何使用CSS来实现这个效果。

 .img-box {
        display: flex;
        flex-wrap: wrap;
    }

    .img-item {
        width: 50%;
        box-sizing: border-box;
        padding: 10px;
    }

    .img-item img {
        max-width: 100%;
    } 

首先，我们需要给包含图片的父容器添加CSS样式，这里我们使用flex布局，设置了flex-wrap为wrap，这样当图片排不下时，会自动换行。

接着，我们给每个图片容器添加CSS样式，设置了宽度为50%，这样就可以将两排图片变成两列图片了。我们还设置了盒模型为border-box，加了padding值，这样可以让图片与图片之间有一定的间隔。

最后，我们给图片设置了max-width限制，这样可以防止图片被拉伸变形。

这样，我们就完成了将两排图片变成两列图片的效果。