Ich habe eine Seite mit mehreren Diagrammen in einem gitterähnlichen Format wie folgt:
%Vor% Jedes Diagramm wird in einem Wrapper mit float:left
angezeigt und das Div, in dem sich die Diagramme befinden, hat overflow: auto
. Dies ergibt das gewünschte Layout, das die Diagramme auf die Bildschirmbreite bringt.
Das Problem, das ich habe, ist, dass es im Druckmodus nur eine Seite druckt und den Rest verliert (auch die erste Seite ist leer). Ich habe ein wenig gelesen und verstehe die Lösung in den meisten Fällen ist, wenden Sie float:none
, die die oben genannten Probleme löst ... Aber ich verliere das Rasterformat und ich möchte mehr als eine Spalte von Diagrammen auf der gedruckten Seite.
Wie kann ich das beheben?
Ich verwende ein Druck-Stylesheet, aber hier sind die Bildschirm-Styles:
%Vor%Float funktioniert in print css nicht gut, also entfernen Sie die floats oder überschreiben Sie sie mit float: none und verwenden Sie stattdessen inline-block:
%Vor% In der Vergangenheit hatte ich das gleiche Problem. Seitdem habe ich nach Lösungen Ausschau gehalten. Meine Lieblingsmethode ist das <table>
-Element. Und erstellen Sie eine andere Seite zum Drucken. Viel Arbeit aber am Ende wert. Da ich es für die Abrechnung brauchte. Und meine Kunden konnten wirklich keine hässliche Rechnung bekommen.
Beispiel:
%Vor%Dies ist ein Problem, mit dem ich bei einem Projekt zu kämpfen habe, und leider habe ich keine einfache Antwort gefunden. Jeroens Antwort funktionierte nicht für mich, da ich unter jedem Bild auch einen Bildunterschriftstext anzeigte, daher brauchte ich Anzeige: Blockverhalten. Der Ansatz, den ich am Ende genommen habe, ist folgender:
[] [] [] []
------- Clearing Div
[] [] [] []
------- Clearing Div
[] [] [] []
usw. ...
Ich habe dafür folgende Stile verwendet:
%Vor%Schließlich, viele Cross-Browser-Tests! Ich fand, dass ich die Bilder für das gleiche Rasterlayout ziemlich klein machen musste, um auf eine Seite über den Browsern zu passen. Dies liegt an den Unterschieden in den Standardseitenrändern, die die verschiedenen Browser verwenden.
Hoffe, das hilft.