css等分布局

子元素等分父元素 中间子元素有间隔 两边子元素固定紧靠父元素边界

1, float + padding+background-clip
<div class='parent'>
<div class='child' style="background-color: lightblue;">1</div>
<div class='child' style="background-color: lightgreen;">2</div>
<div class='child' style="background-color: lightsalmon;">3</div>
<div class='child' style="background-color: pink;">4</div>
</div>

<style>
      .parent{
          margin-right:-20px;
      }
      .child{
          width:25%;
          height:100px;
          padding-right:20px;
          float:left;
          box-sizing:border-box;
          background-clip:content-box;
      }
</style

94E31915-5831-455D-8912-FB82138A8BAE.png

2,float + margin + calc 效果如上图

<style>
    body,p{margin: 0;}
    .parentWrap{
     overflow: hidden;
  }
.parent{
    overflow: hidden;
    margin-right: -20px;
  }
.child{
    float: left;
    height: 100px;
    width: calc(25% - 20px);
    margin-right: 20px;
  }
</style>

3, flex 实现

<style>
     .parent{
      display:flex;
       }
     .child{
       flex:1;
       height:100px;
       }

     .child + .child{
        margin-left:20px;
       }
 </style>