欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

三(奇数)等分两者中间有间隔,两端没间隔_html/css_WEB-ITnose

程序员文章站 2022-06-08 08:18:04
...
1.三等分

采用box-sizing:border-box;然后分别给他们赋值你想要的百分比,左边和上边加上border或者padding,本实例采用的是padding,因为样式1,样式二总共分为两层所有用百分比更加合适,最后给他们的父元素添加个margin-left:-间隔大小;让左右两边的间隔不会出现大小不一样。

三种样式

.banner .cards .cardlist{  padding: 23% 10px 10px 10px;  margin-left: -1%;}.banner .cards .cardlist li{  float: left;  padding-top:1%;  padding-left:1%;  width:33.333%;  box-sizing:border-box;}.banner .cards .cardlist li a{  background-repeat: no-repeat;  background-size: cover;}.banner .cards-1 .cardlist li a{  display: block;  width: 100%;  padding-top: 48.5%;}.banner .cards-1 .cardlist li:nth-child(1) a{  display: block;  width: 100%;  padding-top: 100%;}.banner .cards-2 .cardlist li:nth-child(1),.banner .cards-2 li:nth-child(2){  width:50%;}.banner .cards-2 .cardlist li a{  display: block;  width: 100%;  padding-top: 40%;}.banner .cards-3 .cardlist li a{  display: block;  width: 100%;  padding-top: 100%;}

上一篇: Problem A

下一篇: PAT 秀恩爱分的快