Question

我的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＆＃ 39;高度。 div .page-break的设置高度为210毫米。

每个.page-break div中的.menu-item-div数量都不同。我需要能够在垂直方向上均匀地放置这些div，但是要保持在.page-break div的210mm高度内。

使用flexbox的解决方案很好，我只是不知道flexbox这么做。
另一个要求是这些div将被打印，并且必须在打印时起作用。

Answer 1

在容器上设置以下属性

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

垂直空间DIV垂直

1 个答案:

FIDDLE