版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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;
}