There is an interval between the three (ODD) and the two. There is no interval between the two ends.

There is an interval between the three (ODD) and the two. There is no interval between the two ends.

1. thirds

Use box-sizing: border-box; then assign the expected percentage to them respectively. Add border or padding to the left and top. This instance uses padding because style 1, style 2 is divided into two layers in total. It is more appropriate to use percentages. In the end, add a margin-left:-interval for their parent element, so that the interval between the left and right sides is not different.

<div class="cards cards-1/2/3">    <ul class="cardlist clearfix">                                            <li>            <a href="tuniuapp://travel/discover/new_community/tag_list" style="background-image:url(/image/one.jpeg)"></a>        </li>                                                                            <li>            <a href="tuniuapp://travel/discover/new_community/group_list" style="background-image:url(/image/one.jpeg)"></a>        </li>                                                                            <li>            <a href="tuniuapp://travel/discover/new_community/post_detail?post_id=13883" style="background-image:url(/image/one.jpeg)"></a>        </li>                                    </ul></div>

Three Styles

.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%;}