問題描述

在開發網頁時使用了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;
}

解決效果