Question

这是我的屏幕上的样子，我不太有经验，但是我正在学习。 enter image description here

这是代码的Codepen。

 <div class="heading" id="fquote"> 
<p>Get a free quote or call us today on 07375 200650</p> </div>
 <div class="heading" id= "os"> 
  <p>Our Services </p>

  <div class="services1">
    <h3 class="labels">Local Home Removals </h3>
      <a href="#"><img class="image20" src="images/ukmap.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the cost of removal. This is a free service</p>    
  </div>


  <div class="services1">
    <h3 class="labels">National Home Removals </h3>
      <a href="#"><img class="image20" src="images/national.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the 
         cost of removal. This is a free service</p>    
  </div>

  <div class="services1">
    <h3 class="labels">Packing</h3>
      <a href="#"><img class="image20" src="images/packing.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the cost of removal. This is a free service</p>    
  </div>

  <div class="services1">
    <h3 class="labels">Dismantle & Assembly</h3>
      <a href="#"><img class="image20" src="images/dismantle.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the cost of removal. This is a free service</p>    
  </div>

  <div class="services1">
    <h3 class="labels">Store Pickups</h3>
      <a href="#"><img class="image20" src="images/storepick.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the cost of removal. This is a free service</p>    
  </div>

   <div class="services1">
    <h3 class="labels">Small storage solutions</h3>
      <a href="#"><img class="image20" src="images/storage.png"></a>
      <p class="label-text">A home visit will be carried out to estimate the cost of removal. This is a free service</p>    
  </div>

我一直在努力弄清楚它，但没有设法解决，我唯一能想到的是我没有关闭div，但我已经重新检查了无数次，添加了额外的关闭标签，并在新的div中移动了在线检查集装箱，但我真的不知道我在寻找什么。

Answer 1

由于服务是浮动的，因此容器无法保持其高度，并且所有内容似乎都重叠。将溢出：隐藏到容器中。

.container-fluid {overflow: hidden;}

或给div另一个类，并为该类设置“ overflow：hidden”。

Answer 2

它是重叠的，因为“ services1”元素是浮点数，并且没有正确包含浮点数。

请找到带有解决方案的代码笔：https://codepen.io/vishwaovi/pen/pQPeLZ?editors=1100

我所做的是

1.将clearfix代码复制到CSS（codepen css中的最后一组代码）

Fields!Weekday.Value

2.将明确的修补程序分配给服务1的父级（哪个是服务1）

.cf,.cf:before,.cf:after{
  content:"";
  display: table;
}

.cf:after{
  clear:both;
}

.cf{
  clear:both;
  *zoom:1;
}

（此外，我已经在jumbotron中添加了背景色，因此它是可见的。您可以从嵌入式格式中将其删除）

Answer 3

这是CSS的老问题了。

如果父元素仅包含浮动元素，则其高度将折叠为空。可以通过在容器中的浮动元素之后但在容器关闭之前清除浮动元素来固定它。

基本上，当您的.services1 div浮动时，其父div .service1的高度为零。因此，在这种情况下，当您的.jumbotron div元素位于.container-fluid div的正下方时，它就会与.services1 div的行重叠。

您的解决方案在于清除。如果.jumbotron div为空，则可以采用以下方法：

.jumbotron {
    clear: both;
}

但是，更好的解决方案是对浮动元素的父级应用明确的修补程序。在这种情况下，.container-fluid。将可重用的“ clearfix”类添加到您的父元素，然后将以下内容添加到您的CSS。

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

由于您似乎正在使用Bootstrap，因此它应该已经成为框架的一部分。

在此处了解有关clearfix的更多信息：https://css-tricks.com/snippets/css/clear-fix/

替代方法包括将overflow: hidden;应用于.container-fluid，但这也会隐藏任何溢出的内容，这在某些情况下可能是不受欢迎的行为。

为什么我的超大屏幕重叠我的div感到困惑

3 个答案:

我所做的是