垂直均匀间隔 DIV [英] Evenly Space DIVs Vertically

查看：19
本文介绍了垂直均匀间隔 DIV的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 HTML 如下所示:

<div class="menu-item-div"><!-- DIV 中的内容 -->
<div class="menu-item-div"><!-- DIV 中的内容 -->

<div class="menu-item-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 {显示:弹性；弹性方向:列；对齐内容:间隔；}

小提琴

.page-break {显示:弹性；弹性方向:列；对齐内容:间隔；高度:200px；边框:1px纯绿色；}.menu-item-div {背景:番茄；高度:40px；/* 如果标记中有真实的内容，这将是不必要的 */}

<div class="menu-item-div"><!-- DIV 中的内容 -->
<div class="menu-item-div"><!-- DIV 中的内容 -->

<div class="menu-item-div"><!-- DIV 中的内容 -->

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>

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.

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.

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.

解决方案

Set the following properties on the container 

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆