HTML – 垂直空间DIV垂直

发布时间：2020-12-14 19:41:18 所属栏目：资源来源：网络整理

导读：我有 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我

我有 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!