vue+element遇到的坑

container布局容器问题

1、 el-header和el-aside不在同一行

项目场景：

官方示例代码：

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

问题描述：

在使用Element-UI的Container布局容器时，el-header和el-aside不在同一行。

原因分析：

aside是一个块级元素，它会独占一行，后面不会有其他元素；自然main就掉下去了；

解决方案：

加上浮动：float：left

<el-container>
	<el-aside style="float:left" width="200px">Aside</el-aside>
	<el-container>