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

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:

**

div1

div2

div3

如图3所示:

此时就会破坏div布局。

因此,在布局子div中,要使用方式2和方式3,即float或者position属性。

📌 相关推荐

溺爱欢颜
365足球平台是合法的吗

溺爱欢颜

📅 07-10 👁️ 2702