三(奇数)等分两者中间有间隔,两端没间隔

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

 

posted @ 2016-03-02 15:30  自律西红柿  阅读(412)  评论(0编辑  收藏  举报