html - 如何使用CSS显示等宽的div？

Question

我正在从数据库中获取输出。有时我得到 2 个 div，有时我得到 3 个 div，所以我必须设置相等的 div 宽度。我的意思是，如果有 2 个 div，则设置每个的 50%，如果有 3 个 div，则设置每个的 33.33%。你愿意帮我吗？

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    width: 50%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

#container1 div:nth-of-type(3)
{
    width: 33.33% !important;
}

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

使用 flex: 1 100% 并移除宽度:

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
  <div></div>
</div>

 #container1
  {
    width: 100%;
    display: inline-flex;
  }
#container1 div{
      color: #fff;
    display: inline-block;
    height: 100%;
    flex: 1 100%;
    background: #24252A;
    text-align: center;
    cursor: default;
    padding: 2em 0;
}

#container1 div:nth-of-type(2) {
    background: red;
    }

<div id="container1">
  <!--div depanding upload database-->
  <div></div>
  <div></div>
</div>