el-container布局不正常

最新推荐文章于 2024-06-02 15:10:46 发布
最新推荐文章于 2024-06-02 15:10:46 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh01/article/details/104101255
版权

按照官方文档直接复制过来，发现head和aside、main、foot在同一行
问题排查
查了下官网的文档，发现这样一项说明
微信截图_20191020111230.png
分析原因是：将head、aside、main、foot封装成了独立组件，封装成组件后，el-container中没有了el-footer和el-header，导致子元素排列方向默认为horizontal
问题解决
在el-container上增加 direction="vertical"属性

xjh01
关注
专栏目录
element布局容器大小_element中el-container容器与div布局区分详解
weixin_32616931的博客
01-17 3369
用于布局的容器组件，方便快速搭建页面的基本结构：el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。el-header：顶栏容器。el-aside：侧边栏容器。el-main：主要区域容器。el-footer：底栏容器。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。【这句话请注意】一般这...
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <el gutter=20 class=el-row type=flex> <el span=8 xss=...
Vue中引入elementUI中的container组件失效
最新发布
weixin_42171832的博客
06-02 412
1.不用修改官网中任何css或者html。2.按需引入，不是只是引入官网的就可以。
elementUI el-container水平布局问题
weixin_44214489的博客
05-27 192
踩坑记录
el-container布局不正常、el-header与el-aside与el-main分离并各个封装成组件并引用解决方法
weixin_45917610的博客
10-22 2031
我做毕设时候后台使用elemnt框架，直接去官网上获取他的代码：但是他们是一个界面的方式，而不是自己需要的模板，或者各个封装成组件，做成公共组件。 官网链接：链接: https://element-plus.gitee.io/zh-CN/component/container.html#%E4%BE%8B%E5%AD%90. 现在做成顶部导航（通过官网提供的代码，我们提取出来）： 左侧导航： 引用并与主体使用 效果：大概思路就是这样，必要的样式我还没太多修改，毕竟是毕设，样式不可能这么别致。不能说人家
el-container 实践上的布局问题
qq_39168286的博客
08-22 851
el-container 实践上的布局问题 在上左右布局中出现的一些问题的解决 文章摘自https://www.cnblogs.com/ertingbo/p/8135391.html el-container 实践上的布局问题 当自己利用element-ui上面的例子来实现整体布局的时候， https://images2017.cnblogs.com/blog/1064743/201712/106...
＜el-container＞：封装header布局出错
特仑苏的博客
04-20 327
解决：发现不封装导航栏就不会有这个问题，于是F12查看了两者界面的差别，发现不封装的情况下，最外层的有一个叫“is-vertical”的class，于是在代码内加上。查看官方文档，找到如下属性介绍。个人猜测封装后el-container的direction不知道子元素有el-header，导致默认值为horizontal。el-header被我封装在navbar中，然后router-view路由跳转展示el-main和el-aside的内容，布局结构如下。
Vue3使用elementUI Plus中的el-container布局容器时不能撑开页面的解决方案
qq_61567032的博客
08-25 4024
使用el-container让Aside、Main、Header等部分充满屏幕的解决办法
elementPlus 使用container布局容器不当导致内容不加载，无效，不显示
m0_62170162的博客
04-18 852
el-aside等子组件必须以el-container为亲元素，即使是把el-aside放在子路由组件，然后再引入也不行。
element中el-container容器与div布局区分详解
11-20
el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。 el-header：顶栏容器。 el-aside：侧边栏容器。 el-main：主要区域容器。 el-footer：底栏容器。 以上组件采用了 ...
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container>怎么实现主体部分高度自适应
06-02
这样就使得 `el-container` 占满了整个视口，并且使用了 `flex` 布局。 2. 给 `el-main` 设置 `flex` 属性，并设置 `overflow-y: auto` 让其溢出时出现纵向滚动条： ```css .el-main { flex: 1; overflow-y: ...
解决element-ui中container容器布局的问题
Charis--Cai
06-21 1万+
根据项目需求，我要得是这种效果： 根据官方文档，代码如下： <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>...
vue中使用element-ui
04-03 373
1、搭建Vue开发环境 2、进入vue项目中 1）安装element-ui npm i element-ui -S 注意：安装完成后在package.json中的dependencies会有element-ui。代码如下 "dependencies": { "element-ui"...
解决elementui中Container自适应最上面有空白
sdhuangzheng的博客
03-30 1336
element-ui组件使用遇到更改组件样式无效
qq_44850230的博客
11-21 1340
给组件设置样式无效-----轮播图 <!-- 轮播图 --> <el-container class="lbt" direction="horizontal"> <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="item in 4" :key="item"> <div class="lbtimg">.
elementUI
liuhua7383的专栏
08-25 105
用el-container布局，只有aside和main，但是不能铺满屏幕
element-ui中el-container容器与div布局区分
热门推荐
默默的笔记
04-09 9万+
用于布局的容器组件，方便快速搭建页面的基本结构： el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。 el-header：顶栏容器。 el-aside：侧边栏容器。 el-main：主要区域容器。 el-footer：底栏容器。 以上组件采用了 flex 布局，elemen-ui官方文档链接： http://element-cn.elem...
Element UI中el-container与div布局差异解析
"element中el-container容器与div布局区分详解" 在网页开发中，Element UI 是一个流行的 Vue.js UI 框架，它提供了一系列预先设计的组件，方便开发者快速构建美观且响应式的用户界面。本篇文章主要探讨的是 Element...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值