一个div 宽度100% 高度10%,其中包含三个子div横向排列, 第一个子div,背景色蓝色,宽度10%,位置是显示屏水平居中,其他两个子div,宽度都是10%,一个背景色黑色,一个背景色灰色 依次水平方向靠右,并且最右边的子div,距离右边距20px,
1 第一种
<div style="width: 100%; height: 10%;">
<div style="background-color: blue; width: 10%; margin: 0 auto;"></div>
<div style="background-color: black; width: 10%; float: right;"></div>
<div style="background-color: gray; width: 10%; float: right; margin-right: 20px;"></div>
</div>
2 第二种
<template>
<div class="parent">
<div class="child-blue">sssss</div>
<div class="child-black">dddd</div>
<div class="child-gray">ttt</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.parent {
width: 100%;
height: 10%;
.child-blue {
display: block;
background-color: blue;
width: 10%;
margin: 0 auto;//通过 margin: 0 auto; 实现水平居中。
/**
当一个元素样式属性里有dumargin:0 auto时,并且父元素的宽度是确定的,
意思是这个元素处于其父元素的居中位置,并且这个元素的上下外边距为0
即:上下外边距为0,左右自动,实际效果为左右居中 */
}
.child-black {
background-color: black;
width: 10%;
float: right;
margin-left: 10px;
}
.child-gray {
background-color: gray;
width: 10%;
float: right;
margin-left: 10px;
margin-right: 20px;
}
}
</style>