CSS-разрыва страницы и поплавок не играет хорошо? - PullRequest
Новая
       48

CSS-разрыва страницы и поплавок не играет хорошо?

8 голосов
/ 08 октября 2010

Если у меня есть следующий 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 печатают их все на одной странице, игнорируя разрывы страниц.Это ошибка в этих браузерах?Есть ли лучший способ сделать это?

Спасибо.

1 Ответ

8 голосов
/ 08 октября 2010

Это поплавки, которые портят его для печати. ​​

Вам нужны там поплавки для печати?или поплавки нужны только для Интернета?

Почему я спрашиваю, у вас могут быть разные классы 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>
...