提问人：user3157885 提问时间：10/12/2023 最后编辑：Peter Buser3157885 更新时间：10/12/2023 访问量：21
无法阻止多个页面 （html） 使用 @media print css 重叠 div
Can't stop multiple page (html) from overlapping divs using @media print css
问：
我有一个两列、多页、数据馈送的电话簿。屏幕布局工作正常，打印工作正常，直到最近更新到 DNN。我不能责怪DNN，因为它可能与浏览器有关，但我对Chrome和Edge也有同样的问题。我已经尝试过分页符之前和之后，我准备尝试一种完全不同的方法。我正在寻找确定的镜头格式的建议，也许是表格布局或网格显示？另外，有没有办法在打印预览时查看 css 代码？这将是非常有帮助的。这是我@media打印样式：
@media print {
html, body {
margin: 0;
color: #000;
background-color: #fff;
}
ul.leaders li:after {
content: "";
display: block;
overflow: hidden;
height: 16px;
border-bottom: 1px dotted;
}
.pageContainer {
position: relative;
width: 100%;
height: 1440px;
}
.pageContent{
margin: 0 auto;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
page-break-after: always;
clear: both;
}
.columnLeft {
width: 50%;
height: 1440px;
padding-right: 10px;
}
.columnRight {
width: 50%;
height: 1440px;
padding-left: 10px;
}
.phDirRight{
font-size: 16px;
}
.phDirLeft{
font-size: 16px;
}
.footer {
position: absolute;
bottom: 10px;
}
.pageBreak {
display: block;
page-break-after: always;
}
}
</style>
<!-- ko if: $root.selectedMode() === 'view phone' -->
<div class="pageContainer">
<div class="pageContent">
<div class="columnLeft" data-bind="foreach: $root.page1Leader">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
<div><br /></div>
<div data-bind="foreach: $root.page1Left">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
<div class="columnRight">
<div id="emergencyInfo">
<ul class="leaders">
<li><span class="phType2">Emergency</span>
<span class="contactInfo" >911</span>
</li>
</ul>
<div class="emergencyInfo">(report accident, fire, serious illness, injury or crime in progress that requires immediate response — stay on phone line and give operator emergency location)</div><br />
<ul class="leaders">
<li><span class="phType2">Saint Mary's College Security</span>
<span class="contactInfo" >284-5000</span>
</li>
</ul>
<div class="phType2"> Problems with Utilities or Equipment</div>
<ul class="leaders">
<li><span class="contactInfo" >8 a.m.-4:30 p.m., Monday-Friday</span>
<span class="contactInfo" >284-5657</span>
</li>
</ul>
<div class="phType2"> All other times (including weekends and holidays)</div>
<ul class="leaders">
<li><span class="contactInfo" >digital pager</span>
<span class="contactInfo" >236-8997</span>
</li>
</ul>
</div>
<br />
<div data-bind="foreach: $root.page1Right">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="footer" data-bind="text: $root.footer1"></div>
</div>
答： 暂无答案
上一个：如何修复导航栏上的重叠图像？
下一个：Rails 表单批量编辑验证
评论