Wie kann ich dieses Drucklayout mit Float (im Druck-Stylesheet) reparieren?

Question

Wie kann ich dieses Drucklayout mit Float (im Druck-Stylesheet) reparieren?

8

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%

css css-float

KWorrall 23.01.2009, 11:48

quelle

4 Antworten

Tags und Links css css-float

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Eine gute Empfehlung / Ressource für die Verzweigung in TFS (Team Foundation Server)?

score 6 · Answer 1

6

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%

Hans Rossel 25.09.2014 09:00

quelle

score 1 · Answer 2

1

Ich weiß nicht, ob du wirklich float: left für andere Dinge brauchst, aber du könntest es versuchen:

%Vor%

Das würde auch die div s nebeneinander positionieren und es macht keine seltsamen Dinge für den Fluss des Dokuments.

jeroen 29.01.2009 00:43

quelle

score 1 · Answer 3

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%

score 0 · Answer 4

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:

Zuerst habe ich davon ausgegangen, dass der Benutzer im Hochformat auf A4-Papier drucken wird. Ich habe dies in ein Meldungsfeld auf der Seite eingefügt ("Für beste Ergebnisse bitte im Hochformat drucken ... usw.), das beim Drucken ausgeblendet wird.
Zweitens können Sie Ihre Diagramme immer noch schweben lassen, aber Sie sollten nach jeder Zeile ein Clearing-Div einfügen. (Ich weiß, das verwirrt das Layout beim Drucken im Querformat, daher mein erster Punkt oben).

[] [] [] []
------- Clearing Div [] [] [] []
------- Clearing Div [] [] [] []
usw. ...

Ich ging noch einen Schritt weiter und fügte nach so vielen Zeilen ein seitenunterbrechendes div ein, dass eine A4-Seite ausgefüllt wurde (wie viele davon von Ihrer Bildgröße abhängen).

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.