在网页开发过程中总会有需求让几个div水平显示在一行，而正常情况下两个div默认是block，所以是不能显示在一行的，如下面显示： div { height……

在网页开发过程中总会有需求让几个div水平显示在一行，而正常情况下两个div默认是block，所以是不能显示在一行的，如下面显示：

normal div

上面代码执行的结果是：

下面我来介绍一下把几个div水平显示在一行的几种方法。

1. float

这是最容易想到的方法，设置div的float属性，可以使div脱离文档流，水平显示在一行，代码如下：

float div

2.inline

既然div是因为其是块状元素才不能显示在一行，那么将display属性改为inline-block不就可以使其水平显示在一行了吗

inline div

显示结果如下图：

3.flex

flex和模型也是可以将两个div水平显示的，只要将div对应的父级元素的display属性设置为flex即可：

flex div

显示结果：

与上面两种方法不同的是，上面两种方法是通过改变div自己的css来实现效果，而flex需要在父级设置display:flex,这点是需要注意的。