问题描述

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

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

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

此时我的代码是这样

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

解决办法

<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;
}

解决效果