布局------等分布局篇（宽度等分）

等分布局:（自适应）

第一种：子盒子使用float + width 百分比

        
  #container {
        height: 300px;
      }

      .box {
        width: 25%;
        height: 300px;
        float: left;
        text-align: center;
        line-height: 300px;
      }

<div id="container">
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>

展示结果：

第一种方案改善:(中间出现等宽间距)

  #container {
        height: 300px;
        margin-left:-10px;
      }

      .box {
        width: 25%;
        height: 300px;
        box-sizing: border-box;  // 关键点
        padding-left: 10px;      // 关键点  左右间隙
        margin-bottom: 20px;     // 关键点 上下间隙
        float: left;             
        text-align: center;
        line-height: 300px;
      }

      .box:nth-child(2n) .inner {
        background-color: blueviolet;
      }

      .box:nth-child(2n-1) .inner {
        background-color: aqua;
      }

 <div id="container">
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
    </div>

 展示效果:

第二种：采用table table-cell实现

  #container {
        display: table;
        width: 100%;
        /* 这里要人为设置width,否则width为0,只有使用display:talbe 等分布局时是应用 */
      }

      .box {
        display: table-cell;
        height: 300px;
        text-align: center;
        line-height: 300px;
      }

      .box:nth-child(2n) {
        background-color: blueviolet;
      }

<div id="container">
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>

展示结果:

第三种方flex布局(中间出现等宽间距):

   #container {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;  //设置允许换行
      }

      .box {
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 300px;
      }

      .box:nth-child(2n) .inner {
        background-color: blueviolet;
      }

      .box:nth-child(2n-1) .inner {
        background-color: aqua;
      }


 <div id="container">
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
      <div class="box">
        <div class="inner">2313</div>
      </div>
    </div>

展示效果: