HTML – 垂直空间DIV垂直

我有 HTML,如下所示：

<div class="page-break">  
   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>
</div>

每个.menu-item-div我需要垂直均匀分开以填充div的高度. div .page-break的设置高度为210mm.

每个.page-break div都有不同数量的.menu-item-div.我需要能够在垂直方向上平均间隔这些div,但是要保持在.page-break div的210mm高度内.

使用flexBox的解决方案很好,我只是不知道flexBox足以做到这一点.
另一个要求是这些div将被打印,并且必须在打印时工作.

解决方法

在容器上设置以下属性

.page-break {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

FIDDLE

.page-break {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  border: 1px solid green;
}
.menu-item-div {
  background: tomato;
  height: 40px;
  /* If there was real content in the markup this would not be necessary */
}

<div class="page-break">
  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>

  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>

  <div class="menu-item-div">
    <!-- CONTENT WITHIN DIV -->
  </div>
</div>

原文地址：https://www.jb51.cc/html/223845.html