当前位置:   article > 正文

css实现三个DIV完美等分样式

css实现三个DIV完美等分样式

css实现三个DIV完美等分样式
html代码:

<div class="aa">
      <div style="background:red; height:100px;"></div>
      <div style="background:#00ffff; height:100px;"></div>
      <div style="background:#33CC66; height:100px;"></div>
 </div>
  • 1
  • 2
  • 3
  • 4
  • 5

css:

.aa {
    border: 1px solid red;
    padding: 30px;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: horizontal;
    /* 垂直是vertical */
    -moz-box-orient: horizontal;
    /* 垂直是vertical */
    box-orient: horizontal;
  }

  .aa div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/242066?site
推荐阅读
相关标签