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

发布时间：2020-12-14 16:41:56 所属栏目：资源来源：网络整理

导读：如果我有以下 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

如果我有以下 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>

我想在每个页面上打印一个单词,每个单词后面都有一个分页符. (这是简化的代码 – 在我的实际网页中,浮动很重要.)

Firefox打印得很好,但是IE和Safari都在一个页面上打印它们,忽略了分页符.这是这些浏览器中的错误吗？有一个更好的方法吗？

谢谢.

解决方法

浮动物正在弄乱印刷.

你需要那里的花车进行印刷吗？或只是网络需要浮动？

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

所以你的浮动可以在屏幕媒体上 – 这只会显示在网络上.虽然您希望仅在打印介质上显示分页符.

以下是使用媒体的示例:(注意引用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>

更新：

这可以满足您的需求吗？打印出来时,每页打印3×3.但在屏幕上它是3×6.快速样品.

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!