element中中el-container容器与容器与div布局区分详解布局区分详解
用于布局的容器组件，方便快速搭建页面的基本结构：
el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器。
el-aside：侧边栏容器。
el-main：主要区域容器。
el-footer：底栏容器。
以上组件采用了 flex 布局，elemen-ui官方文档链接：
http://element-cn.eleme.io/#/zh-CN/component/container
此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。
【这句话请注意】
一般这种装箱容器在使用element-ui编写页面的时候非常常见，比 div 更好用一点，但是这次我在使用的时候，他非常的“不听
话”
一、我的需求一、我的需求
这是一个弹出框，基本的页面布局是：
上面的一行为弹出框的title显示
中间部分是主要展示内容
最下面是基本操作按钮
二、提出问题二、提出问题
我最开始的布局代码是：
部分不能说明问题的代码没有写出来
<template>
<el-container class="subject-match height-inherit" id="subject-match">
<el-row :gutter="50">
<el-col :span="5">
</el-col>
<el-col :span="19">
</el-col>
</el-row>
<el-row class="margin-top-10 text-align-right">
<el-button type="primary" @click="closeDialog()">确 定</el-button>
<el-button @click="closeDialog()">取 消</el-button>
</el-row>
</el-container>
</template>
出现的页面是：
这个红色的部分，我放在了el-row里面，应该会出现在最后一行位置，但是他出现在第一行的并存位置，仔细查看代码，一切
正常。
浏览器也已经识别
CSS样式没有冲突的地方。
三、解决方案三、解决方案
修改代码el-container布局为div
页面布局就是想要的结果：
四、分析原因四、分析原因
资源评论
