之前遇到好多时候不知道父级容器的宽度,大多数都是借助js或jquery获取父级HTML标签的宽度,然后再减去之间的间隔距离来确定容器内图片或子级容器的宽度,现在CSS3的calc很好的解决了这个问题,不要烦了。。。


CSS代码

    .demo{
        background: #666;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
      }
    .box{
        width: 33.333333333333336%;
        width: calc((100% - 15px*2) / 3);
        background: #f00;
        height:90px;
    }


HTML代码

   <div class="demo">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
    </div>

效果图



Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐