Div出现在另一个容器/部分中的div前面

时间:2016-10-07 17:47:45

标签: html css

我正在网站上工作,当时我有四个部分,里面有各种div,但是第三部分的内容是第二部分的重叠内容,就像第二部分的高度不会自动调整为内容。

由于有很多代码,我很难在jsfiddle中展示整个问题,所以可以在www.nickcookweb.co.uk/test看到这个问题的实例,其中&#39 ;博客'标题部分与上一部分的服务网格重叠。

(PS。我知道还有很多其他问题......仍在研究它们,很可能会发布更多问题)

2 个答案:

答案 0 :(得分:0)

你的所有.service div都悬空了,从不清除它们。

您可以执行以下操作来解决它......

<div id="servicesGrid">

   <div class="service"></div>
   <div class="service"></div>
   <!-- etc... -->

   <div style="clear: both;"></div> <!-- Solution -->
</div>

默认情况下,div会扩展以适合其内容,float会更改此行为。如果没有明确的话,它会假装那些浮动元素甚至不存在。我们可以通过在最后一个浮动元素之后执行clear: both;来解决和解决这个问题。

答案 1 :(得分:0)

我将servicesGrid的位置更改为静态,这似乎可以解决问题:

#servicesGrid {
    position: static;
}

编辑:以下是有类似问题的人:Floats inside absolute positioned div