सीएसएस पेज-ब्रेक-बाद और फ्लोट अच्छी तरह से खेल नहीं रहा है?

अगर मैं निम्न 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>

मैं चाहता हूँ एक शब्द हर एक के बाद एक पृष्ठ विराम के साथ, प्रत्येक पृष्ठ पर मुद्रित करने के लिए। (यह सरल कोड है - मेरे वास्तविक वेब पेज में, फ्लोट महत्वपूर्ण हैं।)

फ़ायरफ़ॉक्स इस जुर्माना को प्रिंट करता है, लेकिन पेज ब्रेक को अनदेखा करते हुए आईई और सफारी दोनों एक पृष्ठ पर प्रिंट करते हैं। क्या यह उन ब्राउज़रों में एक बग है? क्या ऐसा करने के लिए इससे अच्छा तरीका है?

धन्यवाद।

स्रोत

2010-10-07 Colen

आईई का कौन सा संस्करण आप उपयोग कर रहे हैं? यहां तक कि आईई 8 में इसके साथ समस्याएं हैं: http://www.w3schools.com/CSS/pr_print_pageba.asp ताकि यदि आप आईई 8 की तुलना में एक पुराने का उपयोग कर रहे हैं जो अपराधी हो सकता है। –

यह आईई 8 है, और मैं या तो "बाएं", "दाएं" या "उत्तराधिकारी" का उपयोग नहीं कर रहा हूं, इसलिए मुझे नहीं लगता कि चेतावनी यहां लागू होती है ...? – Colen

मुझे पता है कि आप हमेशा उपयोग कर रहे हैं, लेकिन जब आईई 8 इस के केवल 1 कार्यान्वयन का समर्थन करता है, तो संभावना है कि आईई 7 असफल हो जाएगा। –

यह फ़्लोट्स है जो प्रिंटिंग के लिए इसे गड़बड़ कर रहा है।

क्या आपको प्रिंटिंग के लिए वहां तैरने की ज़रूरत है? या केवल वेब के लिए आवश्यक फ्लोट हैं? जो केवल वेब के लिए दिखाई देगा -

मैं क्यों पूछ रहा हूँ कि आप विभिन्न मीडिया (प्रिंट, स्क्रीन) http://www.w3.org/TR/CSS2/media.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> 
    <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>

स्रोत

2010-10-07 22:34:25

दुर्भाग्य से प्रिंटिंग के लिए फ्लोट की आवश्यकता होती है - मैं चाहता हूं कि प्रत्येक div को तरफ से मुद्रित किया जाए, और फिर 9वीं के बाद तोड़ें (क्योंकि वे पृष्ठ पर 3x3 ग्रिड में हैं)। क्या कोई ऐसी चीज है जो मैं खराब फ्लोट/पेज ब्रेक इंटरैक्शन को पाने के लिए कर सकता हूं? – Colen

मैंने कल थोड़ा सा खर्च किया कि यह पता लगाने की कोशिश कर रहा है कि आईई (7-9 बीटा) में इसे कैसे किया जाए। ऐसा लगता है जब भी वह तत्व उस तत्व पर है, वह ऐसा करेगा। फ्लोट्स के आस-पास और फ्लोट्स के आस-पास के अन्य तत्वों पर पृष्ठ-ब्रेक-बाद में मुझे कुछ भाग्य मिला, लेकिन परिणाम हमेशा "तारकीय" नहीं था। –

उत्तर अपडेट किया गया। यह आईई में काम करेगा। बस अपने 3x3 के चारों ओर एक div के साथ घिरा हुआ है जिसमें पृष्ठ-ब्रेक-बाद है। –

सीएसएस पेज-ब्रेक-बाद और फ्लोट अच्छी तरह से खेल नहीं रहा है?

उत्तर

संबंधित मुद्दे