问题描述
我的 HTML 如下所示:
<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;
}
.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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!