Div堆叠在一起

Question

我正试着做一个又一个的迪夫。我有一个名为services-content，的父div，然后我有一个div(我想一个接一个地堆叠) 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%;
  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领头审计器和div堆栈相同的属性。如果您需要更多的代码，请告诉我！谢谢你的时间和帮助！

Answer 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>

​