gpt4 book ai didi

html - CSS page-break-after 和 float 不能很好地播放?

转载 作者:太空狗 更新时间:2023-10-29 13:46:54 26 4
gpt4 key购买 nike

如果我有以下 HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
</head>
<body>
<div style="page-break-after: always; float: left;">hello</div>
<div style="page-break-after: always; float: left;">there</div>
<div style="page-break-after: always; float: left;">bilbo</div>
<div style="page-break-after: always; float: left;">baggins</div>
</body>
</html>

我想在每一页上打印一个单词,每一个单词之后有一个分页符。 (这是简化的代码 - 在我的实际网页中, float 很重要。)

Firefox 可以很好地打印,但 IE 和 Safari 都将它们全部打印在一页上,忽略分页符。这是那些浏览器中的错误吗?有更好的方法吗?

谢谢。

最佳答案

是浮标在打印时弄乱了它。

你需要那里的花车来打印吗?还是仅网络需要 float ?

为什么我要问的是你可以为不同的媒体(打印、屏幕)设置不同的 CSS 类 http://www.w3.org/TR/CSS2/media.html

所以你的 float 可以在屏幕媒体上 - 这只会显示在网络上。虽然您希望分页符只显示在打印媒体上。

这是一个使用媒体的示例:(请注意,在引用 CSS 时,您可以通过属性选择媒体)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
@media print {
.myDiv { page-break-after: always; }
}
@media screen {
.myDiv {float:left;}
}
</style>
</head>
<body>
<div class="myDiv">hello</div>
<div class="myDiv">there</div>
<div class="myDiv">bilbo</div>
<div class="myDiv">baggins</div>
</body>
</html>

更新:

这能满足您的需求吗?打印时每页给你一个 3x3 的尺寸。但在屏幕上它是 3x6。快速示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
.break
{
page-break-after: right;
width:700px;
clear:both;
}
.myDiv {
float:left;
width:200px;
height:100px;
background-color:blue;
margin:5px;
}
}
</style>
</head>
<body>
<div class="break">
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>


<div class="myDiv">4</div>
<div class="myDiv">5</div>
<div class="myDiv">6</div>


<div class="myDiv">7</div>
<div class="myDiv">8</div>
<div class="myDiv">9</div>
</div>

<div class="break">
<div class="myDiv">11</div>
<div class="myDiv">22</div>
<div class="myDiv">33</div>


<div class="myDiv">44</div>
<div class="myDiv">55</div>
<div class="myDiv">66</div>


<div class="myDiv">77</div>
<div class="myDiv">88</div>
<div class="myDiv">99</div>
</div>
</body>
</html>

关于html - CSS page-break-after 和 float 不能很好地播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3886237/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com