3 つの (奇数) 等しいパーツの中央には隙間があり、両端には隙間がありません_html/css_WEB-ITnose

1. 3 つの等しい部分に分割します

box-sizing: border-box; を使用し、それぞれに希望のパーセンテージを割り当てます。この例では、スタイル 1 であるため、パディングを使用します。 , スタイル 2 は 2 つのレイヤーに分かれているため、左側と右側の間隔のサイズが変わらないように、親要素に margin-left:-interval サイズを追加するのが適切です。 。

<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>

3つのスタイル

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