代码之家 › 专栏 › 技术社区 › Salman Abbas

请解释为什么我的潜水重叠

bootstrap-4 css html

Salman Abbas · 技术社区 · 4 年前

我是html/css的初学者,我正试图通过不同的方式来实现它。我有一个包含一些div的页面

.header-section {
  height: 400px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: red;
  background-clip: content-box;
}

.description-section {
  min-height: 500px;
  border: 2px solid black;
  background-color: lightpink;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: auto;
}

.another-description-section {
  min-height: 500px;
  border: 2px solid black;
  background-color: blueviolet;
  padding-top: 10px;
  padding-bottom: 10px;
}

.column1 {
  height: 90px;
  background-color: blue;
}

.column2 {
  height: 90px;
  background-color: mediumvioletred;
}

.inner-content1 {
  height: 60px;
  background-color: yellow;
}

.inner-content2 {
  height: 60px;
  background-color: chocolate;
}

.logo-style {
  height: 30px;
  background-color: magenta;
}

.logo-description {
  height: 20px;
  background-color: saddlebrown;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="header-section div1 col-lg-12">
  <div class="column1 div3 col-lg-6">
    <div class="inner-content1">
      <div class="logo-style"></div>
      <div class="logo-description"></div>
    </div>
  </div>
  <div class="column2 col-lg-6">
    <div class="inner-content2" style="background-color:antiquewhite;">
      <div class="contact-or-whatever-info" style="background-color:brown;">

      </div>
    </div>
  </div>
</div>

<div class="description-section">
  <div class="inner-description">
    second div
  </div>
</div>

<div class="another-description-section">
  <div class="inner-description">
    third div
  </div>
</div>

我面临的问题是 第二个div div与第一个div重叠(尽管第三个div根本不重叠,而且当我创建另一个简单的div时,一些文本只在第二个和第一个div之间。然后我的第二个div根本没有重叠),所以我使用了一些解决方案,如 clear:both; 或 overflow:hidden/auto; 从这里开始,它按预期工作,但我没有明白,为什么会发生这样的事情?或者是什么导致了主要问题?因为在其他代码几乎相同的页面中,它可以完美地工作(不会重叠)。

有人能帮我理解这一点吗?或者我可能错过了什么。我也为我的导航栏使用了引导程序,它固定在顶部,左右两侧都有链接,但正如我上面提到的,其他带有div的页面运行良好。