在开发过程中,有时会让你将多张图片以2X2或3X3的形式摆放。这里要求任意相邻的两张图片上下和左右之间的间隙相同。
一.padding-top/margin-top,padding-bottom/margin-bottom
1.代码 :
<div class="page-container">
<div class="layout-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item margin"></div>
<div class="item margin"></div>
<div class="item margin"></div>
<div class="item margin"></div>
</div>
</div>
* { padding: 0; margin: 0; }
.page-container {
width: 100%;
height: 100vw;
background-color: #F5F5F5;
}
.layout-wrapper {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-shrink: 0;
width: 24.1%;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
.item.margin { margin-top: 1.2%; }
2.效果图:
3.要点:
当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时,计算结果是参照父元素的宽度。
这里主要使用了以上知识。
二.网格布局
1.代码 :
<div class="page-container">
<div class="layout-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
* { padding: 0; margin: 0; }
.page-container {
width: 100%;
height: 100vw;
background-color: #F5F5F5;
}
.layout-wrapper {
width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 200px 200px;
grid-gap: 12px;
}
.item {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
2.效果图:
3.要点:
网格布局能够简单地实现许多复杂地页面布局。非常实用
在网页编辑中,这种效果比较常用。当然,还可以使用其他方法实现相同效果。