Question

如下面的代码片段所示，类别为div的{{1}}被分组了，那些divSection应该留在文本（文本1，文本2，文本3）的下面。属于div类的div中的元素。我可以在divSection上添加margin，但是当divSection中没有内容时，我希望它的值为0 margin。

div

.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;
}

这应该是这样的：

Answer 1

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

还有一件事情，您不应为这些类使用不同的名称，因为该类的目的是使一个CSS规则可以选择多个项目。对于唯一元素规则，应使用ID而不是类。

希望这会有所帮助。

Answer 2

怎么样？

css：

.divSection {
  background-color: rgba( 26, 26, 26, 0.7);
}

h5 {
  background-color: red;
}

.u-padding-top {
  padding-top: 5px;
}

.section{
  text-align: center;
  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;
}

html：

<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="divSection col-lg-12 u-padding-top">
          <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="divSection 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="divSection 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>

已更新 取消冗余

当我在每个div中添加文本时，DIV会进行分组，并且不会下降

2 个答案: