display 布局一行展示3个之后自动换行

最新推荐文章于 2024-03-28 15:35:59 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-03-28 15:35:59 发布

阅读量3.8k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Maxueyingying/article/details/126505269

版权

在这里插入图片描述

代码：

<div class="co-middle">
        <div style="width: 33.3%">
          <div class="img-btn loading-btn" @click="jumpChange('mbr')">
            MBR Loading
          </div>
        </div>
        <div style="width: 33.3%">
          <div class="img-btn req-btn" @click="jumpChange('req')">
            REQ Loading
          </div>
        </div>
        <div style="width: 33.3%">
          <div class="img-btn mcl-btn" @click="jumpChange('mcl')">
            MCL Loading
          </div>
        </div>
        <div class="two-po" style="width: 33.3%">
          <div class="img-btn gr-btn" @click="jumpChange('gr')">GR Loading</div>
        </div>
        <div class="two-po" style="width: 33.3%">
          <div class="img-btn npI-btn" @click="jumpChange('npl')">
            NPI Loading
          </div>
        </div>
        <div class="two-po" style="width: 33.3%">
          <div class="img-btn ma-btn" @click="jumpChange('material')">
            Material Return
          </div>
        </div>
      </div>

css样式：

<style lang="scss" scoped>
@import "../../../assets/styles/lock-material.scss";
@import "../../../assets/styles/global.scss";
.co-middle {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.loading-btn {
  background: url("../../../assets/images/ml5LoadingSelect/oneBlueBtn.png")
    no-repeat;
}
.req-btn {
  background: url("../../../assets/images/ml5LoadingSelect/greenBtn.png")
    no-repeat;
}
.mcl-btn {
  background: url("../../../assets/images/ml5LoadingSelect/threeBuleBtn.png")
    no-repeat;
}
.gr-btn {
  background: url("../../../assets/images/ml5LoadingSelect/fourGreeBtn.png")
    no-repeat;
}
.npI-btn {
  background: url("../../../assets/images/ml5LoadingSelect/poBtn.png") no-repeat;
}
.ma-btn {
  background: url("../../../assets/images/ml5LoadingSelect/sixBtn.png")
    no-repeat;
}
.img-btn {
  font-size: 16px;
  color: #ffffff;
  width: 190px;
  height: 75px;
  text-align: center;
  line-height: 71px;
}
.two-po {
  margin-top: 49px;
}