1.html部分
<div class="place_all">
<div class="list_margin">
<div class="zl_place_list">
<img
class="place_img"
src=""
alt=""
srcset=""
/>
<div class="place_text">
<span class="name">上海陶艺工艺美术博物馆</span>
<span class="address">杨浦区-专业摄影地</span>
<span class="price">面议</span>
</div>
</div>
<div class="zl_place_list">
<img
class="place_img"
src=""
alt=""
srcset=""
/>
<div class="place_text">
<span class="name">上海陶艺工艺美术博物馆</span>
<span class="address">杨浦区-专业摄影地</span>
<span class="price">面议</span>
</div>
</div>
<div class="zl_place_list">
<img
class="place_img"
src=""
alt=""
srcset=""
/>
<div class="place_text">
<span class="name">上海陶艺工艺美术博物馆</span>
<span class="address">杨浦区-专业摄影地</span>
<span class="price">面议</span>
</div>
</div>
<div class="zl_place_list">
<img
class="place_img"
src=""
alt=""
srcset=""
/>
<div class="place_text">
<span class="name">上海陶艺工艺美术博物馆</span>
<span class="address">杨浦区-专业摄影地</span>
<span class="price">面议</span>
</div>
</div>
<div class="zl_place_list">
<img
class="place_img"
src=""
alt=""
srcset=""
/>
<div class="place_text">
<span class="name">上海陶艺工艺美术博物馆</span>
<span class="address">杨浦区-专业摄影地</span>
<span class="price">面议</span>
</div>
</div>
</div>
</div>2.css部分
.place_all {
margin-top: 150px;
.list_margin{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.zl_place_list {
width: 387px;
height: 380px;
background: #ffffff;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.07);
border-radius: 14px;
margin-right: 18px;
margin-bottom: 18px;
.place_img {
width: 100%;
height: 291px;
border-radius: 14px 14px 0px 0px;
object-fit: cover;
}
.place_text {
display: flex;
flex-direction: column;
padding: 21px 15px;
position: relative;
.name {
font-size: 16px;
font-weight: 500;
color: #333333;
line-height: 22px;
letter-spacing: 1px;
}
.address {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 20px;
padding-top: 5px;
}
.price {
font-size: 16px;
font-weight: 500;
color: #d70603;
line-height: 22px;
letter-spacing: 1px;
position: absolute;
right: 15px;
}
}
}
}
.zl_place_list:nth-child(3n){ //一行显示3个就为3n
/* 尽量让item在list中居中,两边都没有margin */
margin-right: 0;
}
.list_margin:after{
content: "";
flex: auto;
}
}版权声明:本文为mmd1234520原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。