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

1
2
3

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

块级元素在同一行展示的方法_第1张图片

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

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

块级元素在同一行展示的方法_第2张图片

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

块级元素在同一行展示的方法_第3张图片

  • 采用flex布局:把父容器设置成弹性盒子
#container {
  display: flex;
   .div {
	  height: 100px;
	  width: 100px;
	  background: grey;
	  border: 1px solid blue;
   }
}

块级元素在同一行展示的方法_第4张图片

你可能感兴趣的:(css)