CSS3中width的calc()用法
之前遇到好多时候不知道父级容器的宽度,大多数都是借助js或jquery获取父级HTML标签的宽度,然后再减去之间的间隔距离来确定容器内图片或子级容器的宽度,现在CSS3的calc很好的解决了这个问题,不要烦了。。。CSS代码.demo{background: #666;display: flex;-webkit-just
·
之前遇到好多时候不知道父级容器的宽度,大多数都是借助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>
效果图
更多推荐
已为社区贡献1条内容
所有评论(0)