You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
886 B
Vue
36 lines
886 B
Vue
<template>
|
|
<base-container>
|
|
<el-card header="单个子元素和多个子元素显示不同样式,单个子元素没有margin背景黄色,多个子元素有margin背景红色">
|
|
<div class="father">
|
|
<div class="child1">单个子元素</div>
|
|
</div>
|
|
|
|
<div class="father">
|
|
<div class="child1">子元素1</div>
|
|
<div class="child1">子元素2</div>
|
|
<div class="child1">子元素3</div>
|
|
</div>
|
|
</el-card>
|
|
</base-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.father {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 120px;
|
|
|
|
& > .child1 {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: #f00;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
& > .child1:only-child {
|
|
margin: 0px;
|
|
background: yellow;
|
|
}
|
|
}
|
|
</style>
|