Ich habe zwei Reihen von Wörtern in einem div (einfache Textausgabe, noch keine Tabellen usw.), z. B.
%Vor%Nun können diese Listen sehr lang sein und das Format bricht leicht auf kleinen Monitoren. Es sieht so aus:
%Vor%Aber ich würde es gerne so haben:
%Vor%Wie kann ich das erreichen? Ich möchte einfache HTML-Funktionalität, keine Javascript-Abhängigkeiten verwenden.
Ein paar Möglichkeiten, wie Sie das erreichen können:
1) Verwenden Sie eine Tabelle. Platzieren Sie die Tabelle in einem Container-DIV, wobei die overflow-x CSS-Eigenschaft auf auto festgelegt ist. Dadurch wird die Tabelle nach links und rechts verschoben, wenn der Bildschirmbereich zu klein ist.
2) Umbrechen Sie jede Zeile des div ist ein Container ( div , span , etc) und setzen Sie seine white-space CSS-Eigenschaft auf nowrap . Und verwenden Sie auf dem umgebenden DIV erneut die CSS-Eigenschaft overflow-x: auto , um den Container zu scrollen, wenn der Bildschirmbereich zu klein ist.
3) anstelle von zwei Zeilen Text, machen Sie jedes Name / Wert-Paar in einem eigenen DIV, und schweben Sie die DIVs nach links. Wenn der Inhalt umbrochen wird, springt das Paar in die nächste Zeile:
%Vor%Rendert wie folgt:
%Vor% Sie können dies mit einem großen line-height und einem negativen margin-bottom erreichen, das gleich dem doppelten line-height ist: