父级宽度自适应
1.父级限制最大宽度
2.子级竖着排放,每列的个数明确
3.父级的宽度跟随子级元素的个数变化宽度
tips: 因为父级要设置"background-color"属性,所以父级DIV必须要给明确的宽高,这就意味着纯CSS自适应宽度无法做到(好吧,是我做不到)
HTML
<template><div class="apps"><div class="parent"><ulv-for="(item, index) in parentList":key="index"@mouseover="mouseoverParent(index)"@mouseout="mouseoutParent(index)"class="parent-ul"><li>触摸条件-{{ item }}</li></ul><divclass="other-div"@mouseover="mouseoverOther()"@mouseout="mouseoutOther()"><ul v-for="(item, index) in mockContentList" :key="index"><li>内容-{{ item }}</li></ul></div></div></div>
</template>
data
parentList: [1, 2, 3, 4, 5], mockContentList: undefined,index: 0, // 缓存左侧栏选择的第几项的indexwidth1: '120px',width2: