html - DIV 已分组，当我向每个 div 添加文本时它们不会下降

Question

正如您在下面的代码片段中看到的那样，divSection 类的 div 已分组，这些 div 应位于文本下方(文本 1、文本 2、文本 3) 被放入 div 中，类为 divSection。我可以在 divSection 上添加一个 margin，但是当 div 中没有内容时，我希望它有 0 margin >.

.divSection3, .divSection7{
  height: 38px;
  background-color: rgba( 26, 26, 26, 0.7);
}
.section{
  text-align: center;
  padding-top: 13px;
  display: flex;
  flex-basis: 100%;
  align-items: center;
  text-transform: uppercase;
}
.section::before,
.section::after {
  content: "";
  flex-grow: 1;
  background: rgba(255,255,255, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 8px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container mt-5">
  <div class="row">

    <div class="col-12" style="background-color: red;">

      <div class="row">

        <div class="divSection3 col-lg-12">
          <div>
            <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 1</h6>
            <div>
              <h5>texto 1</h5>
            </div>
          </div>
        </div>

        <div class="divSection7 col-lg-12">
          <div>
            <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 2</h6>
            <div>
              <h5>texto 2</h5>
            </div>
          </div>
        </div>

        <div class="divSection3 col-lg-12">
          <div>
            <h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 3</h6>
            <div>
              <h5>texto 3</h5>
            </div>
          </div>
        </div>

      </div>
    
    </div>

  </div>
</div>

它应该是这样的:

Answer 1

请从 .divSection3, .divSection7 选择器中删除 height: 38px;，因为它是多余的。

还有一件事，你不应该为类使用不同的名称，因为类的目的是让多个元素可以通过一个 CSS 规则进行选择。对于唯一元素规则，您应该使用 ID 而不是类。

希望这对您有所帮助。