当前位置：首页 > news >正文

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

news 来源：原创 2024/5/9 5:24:28

先放效果图
在这里插入图片描述
纯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>