HTML打印重叠文本
我需要一些帮助 我希望在每个dina4容器之后都有一个分页符，并添加了分页符命令，但是当我试图打印所有内容时，所有内容都在一个页面上 如何获得正确的打印输出 我需要打印输出，就像每一页上有一个dina4容器一样HTML打印重叠文本,html,css,printing,overlapping,Html,Css,Printing,Overlapping,我需要一些帮助 我希望在每个dina4容器之后都有一个分页符，并添加了分页符命令，但是当我试图打印所有内容时，所有内容都在一个页面上 如何获得正确的打印输出 我需要打印输出，就像每一页上有一个dina4容器一样 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Test</title> <meta http-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="application-name" content="dtfm">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media print {
.dina4 {
page-break-after: always;
}
}
@media screen {
.dina4 {
background-color: #eaFFea;
position:relative;
top: 0;
left: 0;
width: 210mm;
height: 397mm;
}
}
</style>
</head>
<body style="">
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
</body>
</html>
试验
@媒体印刷品{
dina4先生{
分页符后：始终；
}
}
@媒体屏幕{
dina4先生{
背景色：#eaFFea；
位置：相对位置；
排名：0；
左：0；
宽度：210毫米；
高度：397mm；
}
}
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。自然社会
对虾和马格尼对虾产褥期的蒙特斯，印度对虾。Donec quam felis、ultricies nec、pellentesque eu、pretium
奎斯，扫描电镜。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在enim justo，
罗恩卡斯大学，意大利，维尼那提斯大学，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。
万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利奥·利古拉、波特提托·欧、康塞卡特·维塔、埃利芬德·ac、，
埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克
芸香。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。
时间之美，调味品之美，自由之美，平等之美。南奎农，
布兰迪特·维尔、卢克图斯·普尔维纳尔、亨德雷特·艾德、洛雷姆。这是一个非常重要的时刻。多奈克·维泰萨皮恩和自由
威尼斯福西布斯酒店。纳拉姆·奎斯·安特。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯·希特·艾米特
尼布。大矢状背根。塞德·康塞卡特、利奥·埃吉特·比本杜姆·索达莱斯、奥古斯·维利特·库苏斯·努克、，
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。自然社会
对虾和马格尼对虾产褥期的蒙特斯，印度对虾。Donec quam felis、ultricies nec、pellentesque eu、pretium
奎斯，扫描电镜。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在enim justo，
罗恩卡斯大学，意大利，维尼那提斯大学，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。
万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利奥·利古拉、波特提托·欧、康塞卡特·维塔、埃利芬德·ac、，
埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克
芸香。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。
时间之美，调味品之美，自由之美，平等之美。南奎农，
布兰迪特·维尔、卢克图斯·普尔维纳尔、亨德雷特·艾德、洛雷姆。这是一个非常重要的时刻。多奈克·维泰萨皮恩和自由
威尼斯福西布斯酒店。纳拉姆·奎斯·安特。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯·希特·艾米特
尼布。大矢状背根。塞德·康塞卡特、利奥·埃吉特·比本杜姆·索达莱斯、奥古斯·维利特·库苏斯·努克、，
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。自然社会
对虾和马格尼对虾产褥期的蒙特斯，印度对虾。Donec quam felis、ultricies nec、pellentesque eu、pretium
奎斯，扫描电镜。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在enim justo，
罗恩卡斯大学，意大利，维尼那提斯大学，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。
万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利奥·利古拉、波特提托·欧、康塞卡特·维塔、埃利芬德·ac、，
埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克
芸香。埃涅亚饮食。奥古斯一世。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。
时间之美，调味品之美，自由之美，平等之美。南奎农，
布兰迪特·维尔、卢克图斯·普尔维纳尔、亨德雷特·艾德、洛雷姆。这是一个非常重要的时刻。多奈克·维泰萨皮恩和自由
威尼斯福西布斯酒店。纳拉姆·奎斯·安特。我坐在那里，或者我坐在那里。杜伊斯·利奥。塞德·弗林斯·莫里斯·希特·艾米特
尼布。大矢状背根。塞德·康塞卡特、利奥·埃吉特·比本杜姆·索达莱斯、奥古斯·维利特·库苏斯·努克、，
class=dina4class=dina4您需要继续相对定位这些元素。欢迎使用堆栈溢出！寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码。虽然您提供了一个指向示例的链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。您的html中是否有css样式表？这可能是帮助别人的关键。不，我不需要任何帮助