Vue组件置底方法,ElementPlus布局

问题描述

在开发网页时使用了elementplus的el-container组件

组件里分成了main和footer两块,但是想要将两个按钮置底在容器底部遇到了困难

如下图所示,在网页开发者工具可见两个按钮与左侧的图片没有底部对齐

此时我的代码是这样

javascript 复制代码
<el-footer>
   <el-row :gutter="20" style="  display: flex;justify-content: space-between;">
      <el-space>
        <el-col :span="6">
            <el-button @click="button1function" type="primary">button1</el-button>
        </el-col>
        <el-col :span="6">
            <el-button @click="button2function" type="primary">button2</el-button>
        </el-col>
      </el-space>
   </el-row> 
</el-footer>

解决办法

javascript 复制代码
<el-footer class="align-bottom">
   <el-row :gutter="20" style="  display: flex;justify-content: space-between;">
      <el-space>
        <el-col :span="6">
            <el-button @click="button1function" type="primary">button1</el-button>
        </el-col>
        <el-col :span="6">
            <el-button @click="button2function" type="primary">button2</el-button>
        </el-col>
      </el-space>
   </el-row> 
</el-footer>


//在<style>里加入以下代码
.align-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

解决效果

相关推荐
大西瓜瓜瓜几秒前
PS2020,将所有图片不剪切,调整为800×800像素的文档尺寸。
前端
sjin3 分钟前
React源码 - 大名鼎鼎的Fiber
前端
子兮曰4 分钟前
🚀从单体到Monorepo:四川省xxx协会官网架构重生记
前端·next.js·turbopack
bosscheng5 分钟前
0到1理解web音视频从采集到传输到播放系列之《Jessibuca系列篇音视频解封装》
javascript·音视频开发
白水清风8 分钟前
CI/CD学习记录(基于GitLab)
前端·自动化运维·前端工程化
齐杰拉9 分钟前
源码精读:拆解 ChatGPT 打字机效果背后的数据流水线
前端·chatgpt
文心快码BaiduComate19 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed19 分钟前
# vue3 实现前端生成水印效果
前端
恶猫23 分钟前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
IAtlantiscsdn32 分钟前
Redis7底层数据结构解析
前端·数据结构·bootstrap