Div 彼此堆叠

时间：2021-01-26 10:28:02

标签： html css

我正在尝试让 div 一个接一个。 我有一个名为 services-content 的父 div，然后我有 div（我想一个接一个地堆叠）content-row-one，另一个叫做第二行内容。 代码如下：

.services {
  width: 100%;
  height: 100vh;
  position: relative;
}

.services-content {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-row-one {
  width: 90%;
  height: 100%;
  position: absolute;
  justify-content: center;
  display: flex;
}

.row-one {
  display: flex;
  width: 85%;
  height: 500px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  position: absolute;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 500px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 20px;
  text-transform: uppercase;
}
<section class="services">
  <div class="services-content">
    <div class="content-row-one">
      <div class="row-one">
        <div class="quality-management">
          <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="testing-calibration">
          <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="medical-devices">
          <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
      </div>
    </div>
    <div class="content-row-two">
      <div class="row-two">
        <div class="lead-auditor">
          <h6>4. Lead Auditor according to ISO 9001</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="project-management">
          <h6>5. Project Management</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="quality-assurance">
          <h6>6. Quality Assurance</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
      </div>
    </div>
</section>

我没有将属性添加到其他 div，例如：项目管理、质量保证，但我添加了与 div Lead Auditor 和 div 相互叠加。 如果您需要更多代码，请告诉我！ 感谢您的时间和帮助！

1 个答案:

答案 0 :(得分：1)

如果您从 position: absolute 和 content-row-one 中移除 content-row-two，它应该正确堆叠：

.services {
  width: 100%;
  height: 100vh;
  position: relative;
}

.services-content {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-row-one {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-one {
  display: flex;
  width: 85%;
  height: 500px;
  margin: 20px 30px;
}

.quality-management {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.quality-management h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.testing-calibration {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.testing-calibration h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.medical-devices {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.medical-devices h6 {
  font-size: 20px;
  text-transform: uppercase;
}

.content-row-two {
  width: 90%;
  height: 100%;
  justify-content: center;
  display: flex;
}

.row-two {
  display: flex;
  width: 85%;
  height: 500px;
  margin: 20px 30px;
}

.lead-auditor {
  display: flex;
  flex-direction: column;
  width: 35%;
  height: 200px;
  margin: 0px 60px;
}

.lead-auditor h6 {
  font-size: 20px;
  text-transform: uppercase;
}
<section class="services">
  <div class="services-content">
    <div class="content-row-one">
      <div class="row-one">
        <div class="quality-management">
          <h6>1. Quality Management Systems according to ISO 9000 2015</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="testing-calibration">
          <h6>2. Quality Management Systems for Testing and Calibration Laboratories</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="medical-devices">
          <h6>3. Quality Management for Medical Devices according to ISO 13485</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
      </div>
    </div>
    <div class="content-row-two">
      <div class="row-two">
        <div class="lead-auditor">
          <h6>4. Lead Auditor according to ISO 9001</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="project-management">
          <h6>5. Project Management</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
        <div class="quality-assurance">
          <h6>6. Quality Assurance</h6>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis magni praesentium velit sit sapiente sed magnam accusamus quisquam, maxime rem! Adipisci, quisquam? Dolor fugiat dolores porro quo perferendis accusamus!</p>
        </div>
      </div>
    </div>
</section>

相关问题
最新问题