Jak mogę naprawić ten układ wydruku za pomocą Float (w arkuszu stylów drukowania)?

Question

Mam stronę z wielu wykresów w formie siatki podobny sposób następujący:

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

Każdy wykres jest wyświetlany w opakowaniu z float:left i div wykresy są w ma overflow: auto. Daje to pożądany układ zawijający wykresy do szerokości ekranu.

Problem polega na tym, że w trybie drukowania wydrukuje tylko jedną stronę i traci resztę (również pierwsza strona jest pusta). Przeczytałem trochę i rozumiem, że w większości przypadków rozwiązaniem jest zastosowanie float:none, które rozwiązuje powyższe problemy ... Ale tracę format siatki i chcę więcej niż jedną kolumnę wykresów na wydrukowanej stronie.

Jak mogę to naprawić?

Używam arkusz stylów wydruku, ale tutaj są style ekran:

.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

nie wiem, czy naprawdę potrzebujemy float: left na inne rzeczy, ale można spróbować:

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

Umożliwi to również umieszczenie obok siebie div i nie spowoduje to dziwnych zmian w przepływie dokumentu.

Answer 2

To jest problem, z którym walczyłem przy projekcie i niestety nie znalazłem prostej odpowiedzi. Odpowiedź Jeroensa nie działała dla mnie, ponieważ wyświetlałem także napisy pod każdym obrazem, dlatego potrzebowałem wyświetlania: zachowania blokowego. Podejście, które podjąłem, jest następujące:

• Po pierwsze założyłem, że użytkownik będzie drukował na papierze A4 w trybie pionowym. Zawarłem to w oknie komunikatu na stronie ("najlepsze wyniki drukowania w trybie pionowym ... itd.), Który jest ukryty podczas drukowania.
• Po drugie, nadal można wyświetlać wykresy, ale po każdym rzędzie należy wstawić element rozliczeniowy. (Wiem, że to zakłóca układ podczas drukowania w trybie poziomym, stąd mój pierwszy punkt powyżej).

[] [], [], []
------- polana Div
[] [], [], []
------- usuwania div
[] [] [] []
etc ...

• ja też poszedł o krok dalej i włożeniu stron łamiących div po tyle wierszy, aby wypełnić stronę A4 (ile zależy od rozmiaru obrazu).

użyłem następujące style dla tego:

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

Wreszcie zrobić wiele badań cross-browser! Zauważyłem, że musiałem zrobić zdjęcia dość małe, aby taki sam układ siatki mieścił się na jednej stronie w różnych przeglądarkach. Wynika to z różnic w domyślnych marginesach strony używanych przez różne przeglądarki.

Mam nadzieję, że to pomoże.

Answer 3

Float nie działa dobrze w druku css, więc usunąć pływaki lub zastąpić je z float: none i wykorzystanie inline-block zamiast:

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

Answer 4

W przeszłości miałem ten sam problem. Odkąd nie patrzę na rozwiązania. Moją ulubioną metodą jest użycie elementu <table>. I zbuduj inną stronę do drukowania. Mnóstwo pracy, ale w końcu warto. Ponieważ potrzebowałem go do rozliczeń. A moi klienci naprawdę nie mogli otrzymać brzydkiego rachunku.

Przykład:

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