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

导读:本篇文章讲解 display 布局 一行展示3个 之后自动换行,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

在这里插入图片描述

在这里插入图片描述

代码:

<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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/79206.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!