块级元素在同一行展示的方法

<div id="container">
	<div class="div">1</div>
	<div class="div">2</div>
	<div class="div">3</div>
</div>

块级元素正常展示是不在同一行的：

让它们在同一行展示大概有以下几种方法：

• 使用float

#container {
  .div {
	height: 100px;
	width: 100px;
	background: grey;
	border: 1px solid blue;
	float: left;
  }
}

• display:inline-block;

#container {
  .div {
	height: 100px;
	width: 100px;
	background: grey;
	border: 1px solid blue;
	display: inline-block;
  }
}

• 采用flex布局：把父容器设置成弹性盒子

#container {
  display: flex;
   .div {
	  height: 100px;
	  width: 100px;
	  background: grey;
	  border: 1px solid blue;
   }
}