页面效果

1.利用float和margin

.box {
            width: 100%;
        }
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
            float: left;
            margin: 10px 2%;
            text-align: center;
            line-height: 100px;
        }

2.flex盒子

  .box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 100px;
        }     
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
        }

3.利用table，table-cell属性

 .box {
            width: 100%;
            text-align: center;
            line-height: 100px;
            display: table;
        }      
        .one,
        .two,
        .three,
        .forth {
            height: 100px;
            display: table-cell;
        }

4.利用 bootstrap栅格布局

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>