（四）其他横向布局方式

一、块元素与内联元素

1. 介绍

• 块元素是一个元素，它占用了全部的宽度，它前后都是换行符
  例如h1、p、div
• 内联元素只需要显示必要的宽度，不强制换行；
  例如span、a

2.更改元素的显示display

使用display可以更改元素的显示，块元素和内联元素切换；

• {display: inline;}：块元素可以切换到内联元素
• {display: block;}：内联元素可以切换到块元素
• {display:inline-block;}：显示为内联块元素，既有内联元素的同行显示，也有块元素的可修改宽高边距等；

使用inline切换的内联元素宽度、高度以及边距都不可更改，高度就是内容文字或内容图片的宽高；
而使用inline-block，切换的内联元素，宽度、高度以及边距都可以自定义；

一、使用ElementUI

使用ElementUI也可以进行横向布局

<el-row class="flexContainer">
      <el-col :span="8"><div class="first"></div></el-col>
      <el-col :span="8"><div class="second"></div></el-col>
      <el-col :span="8"><div class="third"></div></el-col>
</el-row>
...
.flexContainer {
  background-color: gray;
  height: 50px;
}
.first {
  background-color: red;
  height: 50px;
}
.second {
  background-color: blue;
  height: 50px;
}
.third {
  background-color: green;
  height: 50px;
}

截图
具体使用方式请参考 官网