CSS布局水平居中底部对齐

最新推荐文章于 2024-04-23 13:46:57 发布

Windyluna

最新推荐文章于 2024-04-23 13:46:57 发布

阅读量966

点赞数

分类专栏： CSS 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/Windyluna/article/details/121656621

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS布局技巧：https://blog.csdn.net/weixin_39829501/article/details/111681956
效果：
在这里插入图片描述
分解：

使用 flex 布局

display: flex;
justify-content: center;
align-items: flex-end;

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 480px;
        height: 128px;
        background: #fff;
        padding: 0 20px;
        display: flex;
        border: 1px solid #000;
      }
      .con-box {
        width: 33.3%;
        height: 100%;
        display: flex;
        justify-content: center;
      }
      .con-item {
        width: 90px;
        height: 100%;
        background: #ccc;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .item-ele {
        width: 30px;
        height: 30px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="con-box">
        <div class="con-item">
          <div class="item-ele"></div>
        </div>
      </div>
      <div class="con-box">
        <div class="con-item">
          <div class="item-ele"></div>
        </div>
      </div>
      <div class="con-box">
        <div class="con-item">
          <div class="item-ele"></div>
        </div>
      </div>
    </div>
  </body>
</html>

效果图完整实现：

<template>
  <div class="wraP_">
    <div class="container">
      <div v-for="(item, index) in imgList" :key="index" class="con-box">
        <div class="con-item">
          <div class="item-ele">
            <div class="text-top" :style="{ color: item.color }">
              {{ item.value }}
            </div>
            <img
              :src="item.img"
              alt=""
              :style="{ width: '90px', height: height(item.value) + 'px' }"
              class="img-class"
            />
            <div class="text-bottom">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ExcessRateChart",
  components: {},
  data() {
    return {
      max: 0,
      imgList: [
        {
          status: 1,
          value: "20%",
          text: "第一张",
          img: require("@/assets/images/water/kmo.png"),
          color: "#E8C50B",
        },
        {
          status: 2,
          value: "12%",
          text: "第二张",
          img: require("@/assets/images/water/an.png"),
          color: "#0CD7E2",
        },
        {
          status: 3,
          value: "5%",
          text: "第三张",
          img: require("@/assets/images/water/tp.png"),
          color: "#1EAAFE",
        },
      ],
    };
  },
  methods: {
    maxData() {
      for (let i = 0; i < this.imgList.length; i++) {
        if (parseInt(this.imgList[i].value.split("%")[0]) > this.max) {
          this.max = parseInt(this.imgList[i].value.split("%")[0]);
        }
      }
    },
  },
  computed: {
    height() {
      return function (val) {
        this.maxData();
        let h = (val.split("%")[0] / this.max) * 123;
        return h;
      };
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  width: 480px;
  height: 180px;
  padding: 0 20px;
  display: flex;
}
.con-box {
  width: 33.3%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.con-item {
  width: 90px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.item-ele {
  display: block;
  text-align: center;

  .text-top {
    font-size: 20px;
    font-family: tenxu;
  }
  .text-bottom {
    font-size: 14px;
  }
}
</style>