图片廊

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/102676374

html:

        <div class="photo-box">
            <div class="photo">
                <img src="../images/index_list/7.png" alt="">
                <span>图片1</span>
            </div>
            <div class="photo">
                <img src="../images/index_list/6.png" alt="">
                <span>图片2</span>
            </div>
            <div class="photo">
                <img src="../images/index_list/8.png" alt="">
                <span>图片3</span>
            </div>
            <div class="photo">
                <img src="../images/index_list/9.png" alt="">
                <span>图片4</span>
            </div>
        </div>

css:

/* 图片廊 */

.photo-box {
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
}

.photo {
    width: 45%;
    height: 25%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-top: 2rem;
}

.photo img {
    width: 100%;
    height: 20%;
}

.photo span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    font-family: SourceHanSansCN-Medium;
    font-size: 0.9rem;
    box-shadow: 0rem 0.2rem 0.2rem 0rem rgba(81, 81, 81, 0.19);
    font-weight: normal;
}

代码效果：