CSS page-break-after ve float güzelce oynamıyor musunuz?

Aşağıdaki HTML kodu varsa:CSS page-break-after ve float güzelce oynamıyor musunuz?

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

ben tek kelime her birinden sonra bir sayfa sonu ile, her sayfada basılacak istiyorum. (Bu basitleştirilmiş bir kod - gerçek web sayfamda, yüzenler önemlidir.)

Firefox bunu güzel bir şekilde yazdırıyor, ancak hem IE hem de Safari, sayfa sonlarını göz ardı ederek hepsini tek bir sayfaya yazdırıyor. Bu tarayıcılarda bir hata mı? Bunu yapmanın daha iyi bir yolu var mı?

Teşekkürler.

kaynak

2010-10-07 Colen

Hangi sürüm IE kullanıyorsunuz? IE 8'in bile bu konuyla ilgili sorunları var: http://www.w3schools.com/CSS/pr_print_pageba.asp böylece IE8'den daha büyük bir suçlu olabilirsiniz. –

Bu IE8'dir ve "left", "right" veya "inherit" kullanmıyorum, bu yüzden uyarının burada geçerli olduğunu düşünmüyorum ...? – Colen

Her zaman kullandığınızı biliyorum, ancak IE8 bunu sadece 1 uygulamayı desteklediğinde, IE7 başarısız olabilir. –

Baskı yapmak için uğraşan şamandıralar.

Baskı için şamandıralara ihtiyacınız var mı? veya sadece web için gerekli olan yüzer mi? Sadece web için gösterecektir - Soruyorum Neden

Eğer http://www.w3.org/TR/CSS2/media.html

Yani şamandıra ekran medyada olabilir farklı medya (baskı, ekranı) için farklı CSS sınıfları olabilmesidir. Sayfanızın yalnızca basılı medya için gösterilmesini istediğinizde. (Not CSS referans açarken bir özelliğiyle medyayı seçebilir)

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

Güncelleme:

için bu iş size gereken Neyi İşte

bir medyayı kullanarak örnek nedir? Yazdırırken her sayfada 3x3 verir. Ama ekranda 3x6. Hızlı örnek.

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

kaynak

2010-10-07 22:34:25

Ne yazık ki, baskı için şamandıralar gerekli - Her divun yan yana yazdırılmasını istiyorum ve sonra 9'dan sonra kırıyorum (sayfadaki 3x3 ızgarasında olduklarından). Kötü float/sayfa sonu etkileşimi elde etmek için yapabileceğim bir şey var mı? – Colen

Dün biraz önce (7-9beta) IE'de nasıl yapıldığını anlamaya çalışırken harcadım. Şamandıra o şamandıranın üzerinde olduğu zaman IT bunu yapar. Şamandıranları çevreleyen ve yüzerlerin etrafındaki diğer elemanlara sayfa ayırmayı bir kenara bıraktım, ama sonuç her zaman "yıldız" değildi. –

Cevabı güncellendi. Bu IE'de çalışacaktır. Sadece 3x3'lerinizi sayfa sonu olan bir div ile çevreleyin. –

CSS page-break-after ve float güzelce oynamıyor musunuz?

cevap

İlgili konular