CSS page-break-after和float不能正常播放？ [英] CSS page-break-after and float not playing nicely?
问题描述
如果我有以下HTML代码：
If I have the following HTML code:
<!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>
我想在每一页上打印一个单词，每个单词后分页。 （这是简化的代码 - 在我的实际网页，浮动是重要的。）
I want one word to be printed on each page, with a page break after each one. (This is simplified code - in my actual web page, the floats are important.)
Firefox打印这个罚款，但IE和Safari打印它们在一个页面上，忽略分页符。这是在这些浏览器的错误？有更好的方法吗？
Firefox prints this fine, but both IE and Safari print them all on one page, ignoring the page breaks. Is this a bug in those browsers? Is there a better way to do this?
谢谢。
推荐答案
>
你需要那些漂浮物来打印吗？
Do you need the floats there for printing? or are floats only needed for the web?
为什么我问的是你可以有不同的CSS类为不同的medias（打印，屏幕）
http://www.w3.org/TR/CSS2/media.html
Why I am asking is you can have different CSS classes for different medias (print, screen) http://www.w3.org/TR/CSS2/media.html
所以你的浮动可以在屏幕媒体 - 这将只显示为web。
So your float can be on the screen media - which will show only for web. While you will want your page break only to show for print media.
以下是使用媒体的示例：（注意，当引用CSS时，您可以通过属性选择媒体）
Here is an example using the media: (note when referencing CSS you can choose media via an attribute )
<!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。快速示例。
Will this work for what you need? GIves you a 3x3 on each page when printing out. But on the screen it's a 3x6. Quick sample.
<!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>
这篇关于CSS page-break-after和float不能正常播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
