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

最新推荐文章于 2023-04-07 10:53:27 发布

小妤妤

最新推荐文章于 2023-04-07 10:53:27 发布

阅读量946

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43195831/article/details/120784645

版权

CSS布局三栏等分盒模型 flex布局 CSS样式

关键词由CSDN通过智能技术生成

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>

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