我有
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;
}
.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>
