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