将子div的平均分区划分为父div

Question

我在将三个子div分成固定大小的父div时遇到问题。如图中所示，我想在父div内将这些子div划分为相同大小。如果您不明白这个问题，请添加评论，但我会将照片张贴在下面，以便您对我的要求有所了解。

.qm {
  height: 60%;
  background: #fcfcfc;
  box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 0 1rem;
  width: 18%;
  position: relative;
  overflow: hidden;
  justify-content: center;
}

.qmheading {
  background-color: lightblue;
}

.qmimage {
  background-color: lightcoral;
}

.qmparagraph {
  background-color: lightgreen;
}

<div class="qm">
  <div class="qmheading">
    <h1>
      Quality Management
    </h1>
  </div>
  <div class="qmimage">
    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" alt="">
  </div>
  <div class="qmparagraph">
    <p>
      ISO 9001 2015, <br> ISO 17025 & ISO 13485
    </p>
  </div>
</div>

Answer 1

一种选择是将固定高度（例如height: 20vh;）添加到您的孩子div。我选择20vh的高度，因为我假设您的父母div的高度是视口高度的60％。因此，60vh / 3 = 20vh。

Answer 2

这是我尝试过的方法，首先，我在父div中添加了width和min-width。其次，我添加了固定高度，填充和弹性。然后，在删除p标签时，我在.gmparagraph中添加了font-size和font-family。

    h1 {
     	margin: 0px;
    }
    .qm {
        height: 60%;
        background: #fcfcfc;
        box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
        border-radius: 20px;
        padding: 0 1rem;
        width: 310px;
        min-width: 18%;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    .qm div{
        height: 120px;	
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qmheading {
      	background-color: lightblue;
    }

    .qmimage {
      	background-color: lightcoral;
    }

    .qmparagraph {
        background-color: lightgreen;
        font-family: sans-serif;
    }

<div class="qm">
  <div class="qmheading">
    <h1>
      Quality Management
    </h1>
  </div>
  <div class="qmimage">
    <img width=120 src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" alt="">
  </div>
  <div class="qmparagraph">
      ISO 9001 2015, <br> ISO 17025 & ISO 13485
  </div>
</div>