项目需求:在自适应的时候两边边距与中间边距一样,一行两个,第三个自动靠左边,如图
解决代码如下:
这里这里这里→
/*html内容*/
<div class="ns_class_video">
<div style="width: 100%;"><img style="width: 100%;height: 105px;" src="../../ny-main-expert/img/fuwu.png" alt=""></div>
</div>
/*css样式*/
.ns_class_content{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
padding: 0 20px;
}
.ns_class_video{
width:calc((100% - 10px*2)/2);
border-radius:10px;
text-align: center;
border:1px solid #333;
margin-bottom:20px;
}
一行三个:如图
敲重点!!!!-----> width:calc((100% - 10px*n)/n);
.ns_class_video{
width:calc((100% - 10px*3)/3);
border-radius:10px;
text-align: center;
border:1px solid #333;
margin-bottom:20px;
}