Vue组件置底方法,ElementPlus布局

问题描述

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

解决效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/718077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件底层的深入理解之文件输入输出重定向

目录 一、文件fd的分配规则 二、对输出重定向现象的理解 三、输出输入重定向的简单实现 1、输出重定向 2、输入重定向 一、文件fd的分配规则 最小的没有被使用的数组下标&#xff0c;会被分配给最新打开的文件。 二、对输出重定向现象的理解 正如上面这段代码所示&#xff0…

从零开始学习Netty - 学习笔记 -Netty入门【半包,黏包】

Netty进阶 1.黏包半包 1.1.黏包 服务端代码 public class HelloWorldServer {private static final Logger logger LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());public static void main(String[] args) {NioEventLoopGroup bossGroup new NioEventL…

Ubuntu上Jenkins自动化部署Gitee上VUE项目

文章目录 1.安装NodeJS插件2.配置全局工具配置-NodeJS环境变量3.新建自由风格的软件项目任务4.配置General配置丢弃旧的构建配置参数化构建过程 5.配置源码管理6.构建触发器7.设置构建环境8.配置构建步骤9.配置构建后操作10测试构建 前文链接&#xff1a; Ubuntu上Jenkins自动…

java常用应用程序编程接口(API)——Instant,DateTimeFormatter,Period,Duration概述

前言&#xff1a; 整理下学习心得。打好基础&#xff0c;daydayup&#xff01; Instant Instant是时间线上的某个时刻/时间戳&#xff0c;通过获取Instant的对象可以拿到此刻的时间&#xff0c;该时间由两部分组成&#xff1a;1&#xff0c;从1970年1月1日00:00:00开始走到此刻…

前端开发 VSCode 插件推荐

1、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code VS Code 的中文&#xff08;简体&#xff09;语言包&#xff0c;此中文&#xff08;简体&#xff09;语言包为 VS Code 提供本地化界面。 下载地址&#xff1a;Chinese (Simplified) (简体中文) La…

D*算法超详解 (D星算法 / Dynamic A*算法/ Dstar算法)(死循环解决--跟其他资料不一样奥)

所需先验知识&#xff08;没有先验知识可能会有大碍&#xff0c;了解的话会对D*的理解有帮助&#xff09;&#xff1a;A*算法/ Dijkstra算法 何为D*算法 Dijkstra算法是无启发的寻找图中两节点的最短连接路径的算法&#xff0c;A*算法则是在Dijkstra算法的基础上加入了启发函数…

[JavaWeb玩耍日记]HTML+CSS+JS快速使用

目录 一.标签 二.指定css 三.css选择器 四.超链接 五.视频与排版 六.布局测试 七.布局居中 八.表格 九.表单 十.表单项 十一.JS引入与输出 十二.JS变量&#xff0c;循环&#xff0c;函数 十三.Array与字符串方法 十四.自定义对象与JSON 十五.BOM对象 十六.获取…

Network LSA 结构简述

Network LSA主要用于描述一个区域内的网络拓扑结构&#xff0c;包括网络中的路由器和连接到这些路由器的网络。它记录了每个路由器的邻居关系、连接状态以及连接的度量值&#xff08;如带宽、延迟等&#xff09;&#xff0c;以便计算最短路径和构建路由表。display ospf lsdb n…

网关kong记录接口处理请求和响应插件 tcp-log-with-body的安装

tcp-log-with-body 介绍 Kong的tcp-log-with-body插件是一个高效的工具&#xff0c;它能够转发Kong处理的请求和响应。这个插件非常适用于需要详细记录API请求和响应信息的情景&#xff0c;尤其是在调试和排查问题时。 软件环境说明 kong version 2.1.4 - 2.8.3 [可用亲测]C…

二、数据结构——单链表,双链表,栈,队列,单调栈,单调队列,KMP,Trie,并查集,堆,哈希表等内容。

对于链表来说&#xff0c;由于new操作时间太长&#xff0c;因此&#xff0c;算法题中一般使用静态链表。 1.单链表 采用数组实现单链表&#xff0c;可以直接开两个数据&#xff0c;一个数组存放数值&#xff0c;另外一个数据存放下一个元素&#xff08;指针&#xff09;。 示…

一个教材上的CMS网站源码在Linux服务器上登录时验证码正常,但在windows下不能正常显示

一个教材上的CMS网站源码在Linux服务器上登录时验证码正常&#xff0c;但在windows下不能正常显示。 在linux服务器上能正常显示。显示界面如下所示&#xff1a;

蜻蜓FM语音下载(mediadown)

一、介绍 蜻蜓FM语音下载&#xff08;mediadown&#xff09;&#xff0c;能够帮助你下载蜻蜓FM音频节目。如果你是蜻蜓FM会员&#xff0c;它还能帮你下载会员节目。 二、下载地址 本站下载&#xff1a;蜻蜓FM语音下载&#xff08;mediadown&#xff09; 百度网盘下载&#…

【Redis 主从复制】

文章目录 1 :peach:环境配置:peach:1.1 :apple:三种配置方式:apple:1.2 :apple:验证:apple:1.3 :apple:断开复制和切主:apple:1.4 :apple:安全性:apple:1.5 :apple:只读:apple:1.6 :apple:传输延迟:apple: 2 :peach:拓扑结构:peach:2.1 :apple:⼀主⼀从结构:apple:2.2 :apple:⼀…

【MetaGPT】配置教程

MetaGPT配置教程&#xff08;使用智谱AI的GLM-4&#xff09; 文章目录 MetaGPT配置教程&#xff08;使用智谱AI的GLM-4&#xff09;零、为什么要学MetaGPT一、配置环境二、克隆代码仓库三、设置智谱AI配置四、 示例demo&#xff08;狼羊对决&#xff09;五、参考链接 零、为什么…

大数据技术(一)

大数据技术概述 大数据技术层面及其功能 数据采集与预处理 利用ETL(extract-transform-load)工具将分布的、异构数据源中的数据&#xff0c;如关系数据、平面数据文件等&#xff0c;抽取到临时中间层后进行清洗、转换、集成&#xff0c;最后加载到数据仓库或数据集市中&…

前端canvas项目实战——简历制作网站(五):右侧属性栏(字体、字号、行间距)

目录 前言一、效果展示二、实现步骤1. 优化代码&#xff0c;提取常量2. 实现3个编辑模块3. 实现updateFontProperty方法4. 一个常见的用法&#xff1a;仅更新当前选中文字的样式 三、Show u the code后记 前言 上一篇博文中&#xff0c;我们扩充了线条对象&#xff08;fabric.…

Dockerfile构建过程详解

Dockerfile介绍 docker是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 1、编写一个dockerfile文件 2、docker build构建成为一个镜像 3、docker run 运行镜像 …

PDF转Excel的未来:人工智能技术如何提升转换效率和准确性

随着信息技术的快速发展&#xff0c;PDF和Excel作为两种重要的文件格式&#xff0c;在日常生活和工作中扮演着至关重要的角色。PDF以其独特的跨平台阅读特性&#xff0c;成为了文件分享和传输的首选格式&#xff1b;而Excel则以其强大的数据处理能力&#xff0c;成为了数据分析…

【二分查找】【C++算法】378. 有序矩阵中第 K 小的元素

作者推荐 视频算法专题 本文涉及的基础知识点 二分查找算法合集 LeetCode378. 有序矩阵中第 K 小的元素 给你一个 n x n 矩阵 matrix &#xff0c;其中每行和每列元素均按升序排序&#xff0c;找到矩阵中第 k 小的元素。 请注意&#xff0c;它是 排序后 的第 k 小元素&…

机器人持续学习基准LIBERO系列10——文件结构

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo机器人持续学习基准LIBERO系列5——…