vue 一个div中三个子div水平布局,一个子div屏幕中间,其他两个子div 依次靠右

原创已于 2023-07-10 18:07:16 修改 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

于 2023-07-10 16:36:04 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

一个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>