div中内嵌并排div的显示问题布局

在页面布局中，最常使用的就是div标签，经常会出现div中内嵌div的情形，这时，子div的排列就相当重要。下面推荐两种方式。

**
1. 当需要两个div并排显示，并拥有同一个父div时： **

此时页面显示为：

文章图片

div之间默认有个间隔。需要把子div的总长度减少才能在一排显示。
**
2. 使用float属性时： **

此时页面显示为：

文章图片

div之间没有间隔并且并排显示，但是此时脱离了文档流，即灰色div也必须要用float: left属性，不然就会覆盖绿色div。
**
3. 使用position属性： **

这时能达到和图2同样的效果，原理也一样，position: absolute能使div脱离文档流。
**
4. 当我们在并排div中加标签时，若使用方式1： 【div中内嵌并排div的显示问题】**

div1 div2 div3

如图3所示：

文章图片

此时就会破坏div布局。
因此，在布局子div中，要使用方式2和方式3，即float或者position属性。

div中内嵌并排div的显示问题