css控制卡片内部的左右布局

news2024/10/6 14:25:40

先放效果图
在这里插入图片描述
纯css样式可以根据需求进行更改

<template>
<!-- 卡片盒子 -->
      <div class="card_box ">
        <el-card class="box-card  w400" v-for="(item,index) in cardList" :key="index">
  <div slot="header" class="clearfix">
    <span>{{ item.title }}</span>
  </div>

  <div v-for="(value,ind) in item.data" :key="ind" class="card_left_right">
    <div class="left"><div class="grey">{{ value.second }}</div></div>  <div class="right"><div class="right_card" v-for="(val,i) in value.tit" :key="i">{{ val }}</div></div>
  </div>
</el-card>

</div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      input3: null,
      cardList:[{title:'进口服务',data:[{second:'关务代理',tit:['海关申报','报告单制作','检验检疫','卫生环保']},
                                        {second:'货物代理',tit:['国际货运','国内物流','仓储租赁','仓库租赁']},
                                      {second:'船务代理',tit:['船舶进出港','船舶供应','集装箱租赁','集装箱运输']}]},
                {title:'出口服务',data:[{second:'关务代理',tit:['海关申报','报告单制作','检验检疫','卫生环保']},
                                        {second:'货物代理',tit:['国际货运','国内物流','仓储租赁','仓库租赁']},
                                      {second:'船务代理',tit:['船舶进出港','船舶供应','集装箱租赁','集装箱运输']}]},
                {title:'金融服务',data:[{second:'金融服务',tit:['供应链金融','进口退税','出口退税','跨境结算','中短期贷款','长期贷款']}]},
                {title:'网站建设',data:[{second:'网站开发',tit:['企业官网','商城建设','电商网站','门户网站','定制开发','营销型网站','外贸网站','响应式网站']},
                                        {second:'网站运维',tit:['API接口','脚本开发','前端开发','后端开发','测试服务','运维服务']}]},
                {title:'移动端开发',data:[{second:'小程序开发',tit:['微信小程序','百度小程序','点餐小程序','小程序游戏','H5开发',]},
                                        {second:'APP开发',tit:['iOS应用','安卓应用','商城应用','手游开发',]}]},
                                      
                                      ]
    }
  },
  methods: {
  

  },
};
</script>
<style scoped lang="scss">
// 卡片盒子外层
.card_box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  // justify-content: flex-start;/* 替代space-between布局方式 */
      flex-wrap: wrap;
  .box-card {
    flex: 1;

    /* 间隙为5px */
    margin: 0 5px 5px 0;
    /* END */

    /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
    width: calc((100% - 10px) / 3);
    /* END */

    /* 加入这两个后每个item的宽度就生效了 */
    min-width: calc((100% - 10px) / 3);
    max-width: calc((100% - 10px) / 3);
    /* END */
}

.box-card:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
}
}

//卡片内部
.w400{
  width: 300px;
}
.card_left_right{
  display: flex;
  width: 100%;
  // flex-wrap: wrap;
    // justify-content: flex-start;/* 替代space-between布局方式 */
    justify-content: space-between;/* 替代space-between布局方式 */
  .left{
    width: 100px;

  }
  .right{
    flex:1;

  }

.right_card{

display: inline-block;
    // /* 间隙为5px */
    margin: 0 5px 5px 0;
width: calc((100% - 10px) / 2);

min-width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
 
  
}
  .right_card:nth-child(2n) {
    /* 去除第2n个的margin-right */
    margin-right: 0;
}
}

</style>