css3 子元素平均宽度

最新推荐文章于 2024-04-11 16:37:43 发布

Technofiend

最新推荐文章于 2024-04-11 16:37:43 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/technofiend/article/details/61197580

版权

这里写图片描述

sass代码

.statistics_box {
    width: 100%;
    height: 100px;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    margin: auto;
    div {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
        text-align: center;
        line-height: 100px;
        font-size: 36px;
        color: #fff;
    }
    .statistics_item1{
        background: #1abc9c;
    }
    .statistics_item2{
        background: #3498db;
    }
    .statistics_item3{
        background: #9b59b6;
    }
    .statistics_item4{
        background: #b6b059;
    }
}

对应的css代码

css代码

.statistics_box {
  width: 100%;
  height: 100px;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  margin: auto;
}

.statistics_box div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  text-align: center;
  line-height: 100px;
  font-size: 36px;
  color: #fff;
}

.statistics_box .statistics_item1 {
  background: #1abc9c;
}

.statistics_box .statistics_item2 {
  background: #3498db;
}

.statistics_box .statistics_item3 {
  background: #9b59b6;
}

.statistics_box .statistics_item4 {
  background: #b6b059;
}