Vue组件置底方法，ElementPlus布局

聪明小萝卜2024-03-03 19:25

问题描述

在开发网页时使用了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;
}

解决效果