垂直均匀放置DIV [英] Evenly Space DIVs Vertically

问题描述

我有如下所示的HTML:

I have HTML that looks like the following:

<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的设置高度.

Each .menu-item-div I need to be evenly spaced apart vertically to fill the div's height. The div .page-break does have a set height of 210mm.

每个.page-break div中将有不同数量的.menu-item-div.我需要能够将这些div垂直均匀地隔开，但要保持在.page-break div的210mm高度之内.

Each .page-break div will have a different number of .menu-item-div within it. I need to be able to equally space these divs vertically but stay contained within the .page-break div's height of 210mm.

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

A solution using flexbox is fine, I just don't know flexbox enough to do this.
Another requirement is these divs will be printed and it has to work when printed.

推荐答案

在容器上设置以下属性

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

FIDDLE

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！