效果:
在这里插入图片描述
代码

 <div class="co-middle">
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/blueBtn.png" alt="" />
        <div class="img-title oneBtn">Pre Task Dispatch</div>
      </div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/qBlueBtn.png" alt="" />
        <div class="img-title twoBtn">Line Prep DispatchH</div>
      </div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/poBtn.png" alt="" />
        <div class="img-title threeBtn">Outside Shelf Dispatch</div>
      </div>
      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/greenBtn.png" alt="" />
        <div class="img-title fourBtn">Warehouse Dispatch</div>
      </div>

      <div class="img-btn">
        <img src="../../../assets/images/ml5DisSelect/sBlueBtn.png" alt="" />
        <div class="img-title fiveBtn">NPI Dispatch</div>
      </div>
    </div>
    
    <style>
        .co-middle {
         display: flex;
         flex-wrap: wrap
         clear: both;
         margin: 25px;
         ;
}
        .img-btn {
          margin-bottom: 20px;
          width: 33.33%;
}
    </style>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐