मैं फ्लोट के साथ इस प्रिंट लेआउट को कैसे ठीक कर सकता हूं (प्रिंट स्टाइलशीट में)?

Question

मेरे पास एक ग्रिड-जैसी प्रारूप में एकाधिक चार्ट वाले एक पृष्ठ हैं:

[ ] [ ] [ ] [ ] 
[ ] [ ] [ ] [ ] 
[ ] [ ] [ ] [ ] 
[ ] [ ] [ ] [ ] 
[ ] [ ] [ ] [ ] 

प्रत्येक चार्ट float:left के साथ एक रैपर में प्रदर्शित होता है और चार्ट में divs overflow: auto है। यह चार्ट चौड़ाई को चार्ट को लपेटने के वांछित लेआउट देता है।

मेरी समस्या यह है कि प्रिंट मोड में यह केवल एक पृष्ठ प्रिंट करता है और बाकी को खो देता है (पहला पृष्ठ खाली भी है)। मैंने थोड़ा सा पढ़ा है और ज्यादातर मामलों में समाधान को समझना है float:none लागू करना जो उपर्युक्त समस्याओं को हल करता है ... लेकिन मैं ग्रिड प्रारूप खो देता हूं और मुझे मुद्रित पृष्ठ पर चार्ट के एक से अधिक कॉलम चाहिए।

मैं इसे कैसे ठीक कर सकता हूं?

मैं प्रिंट स्टाइल शीट का उपयोग कर रहा हूं लेकिन यहां स्क्रीन शैलियों हैं:

.chartSpace /* surrounds all charts */ 
{ 
    padding-top: 20px; 
    width: auto; 
    overflow: auto; 
} 

.chartWrapper /* wrapper for each chart */ 
{ 
    float: left; 
    padding: 0 20px 0 0; 
} 

Answer 1

मैं यदि आप वास्तव में अन्य बातों के लिए float: left जरूरत है पता नहीं है, लेकिन आप की कोशिश कर सकते:

/* wrapper for each chart */ 
.chartWrapper { display: inline; padding: 0 20px 0 0; } 

यह div एस को एक-दूसरे के बगल में भी रखेगा और यह दस्तावेज़ के प्रवाह में अजीब चीजें नहीं करता है।

Answer 2

यह एक समस्या है जिसके साथ मैंने एक परियोजना पर लड़ाई लड़ी है और दुर्भाग्य से मुझे कोई सीधा जवाब नहीं मिला है। जेरोन्स का उत्तर मेरे लिए काम नहीं करता क्योंकि मैं प्रत्येक छवि के तहत कुछ कैप्शन टेक्स्ट भी प्रदर्शित कर रहा था इसलिए मुझे प्रदर्शन की आवश्यकता थी: ब्लॉक व्यवहार। जिस दृष्टिकोण को मैं समाप्त कर रहा हूं वह निम्नानुसार है:

• सबसे पहले मैंने एक धारणा की कि उपयोगकर्ता पोर्ट्रेट मोड में ए 4 पेपर पर प्रिंट करेगा। मैंने इसे पृष्ठ पर एक संदेश बॉक्स में शामिल किया है ('सर्वोत्तम परिणामों के लिए कृपया पोर्ट्रेट मोड में प्रिंट करें ... आदि) जो मुद्रण करते समय छुपा हुआ है।
• दूसरा, आप अभी भी अपने चार्ट को फ़्लोट कर सकते हैं लेकिन आपको प्रत्येक पंक्ति के बाद एक समाशोधन div डालना चाहिए। (मुझे पता है कि यह लैंडस्केप मोड में प्रिंट करते समय लेआउट को गड़बड़ कर देता है इसलिए मेरा पहला बिंदु ऊपर)।

[] [] [] []
------- समाशोधन div
[] [] [] []
------- div
समाशोधन [] [] [] []
आदि ...

• मैं भी एक कदम आगे चला गया और काफी पंक्तियों के बाद एक पृष्ठ को तोड़ने div डाला एक A4 पेज को भरने के लिए (कितने अपनी छवि का आकार पर निर्भर करता है)।

  div.pageBreak { 
      page-break-after: always; 
      visibility:hidden; 
      height:1px !important; 
      margin:0; 
  } 
  

  अंत में, पार ब्राउज़र का परीक्षण के बहुत सारे कार्य करें:

मैं इसके लिए निम्नलिखित शैलियों का इस्तेमाल किया! मैंने पाया कि ब्राउज़र में एक पेज पर फ़िट होने के लिए मुझे एक ही ग्रिड लेआउट के लिए छवियों को काफी छोटा बनाना था। यह डिफ़ॉल्ट पेज मार्जिन में अंतर के कारण है जो विभिन्न ब्राउज़र नियोजित करते हैं।

उम्मीद है कि इससे मदद मिलती है।

Answer 3

फ्लोट प्रिंट सीएसएस में अच्छी तरह से काम नहीं करता है, तो तैरता उन्हें निकाल या नाव से ओवरराइड: कोई नहीं और उपयोग इनलाइन-ब्लॉक के बजाय:

.chartWrapper { 
    float: none; 
    display: inline-block; 
    vertical-align: top; 
    padding: 0 20px 0 0; 
} 

Answer 4

अतीत मैं एक ही मुद्दा था में। जब से मैंने समाधान के लिए खुली नजर रखी। मेरी पसंदीदा विधि <table> तत्व का उपयोग कर रही है। और मुद्रण के लिए एक अलग पृष्ठ बनाएँ। काम के भार लेकिन अंत में इसके लायक है। चूंकि मुझे बिलिंग के लिए इसकी आवश्यकता थी। और मेरे ग्राहकों को वास्तव में एक बदसूरत बिल नहीं मिल सका।

उदाहरण:

<table style="width: 100%;"> 
    <tr> 
    <td>Alek Rasschaert</td> 
    <td style="width: 60%"></td> 
    <td>Mobile Express</td> 
    </tr> 
    <tr> 
    <td>Diestsesteenweg 93</td> 
    <td style="width: 60%"></td> 
    <td>Diestsesteenweg 93</td> 
    </tr> 
    <tr> 
    <td>3010 Kessel-Lo</td> 
    <td style="width: 60%"></td> 
    <td>3010 Kessel-Lo</td> 
    </tr> 
</table>