So richten Sie Text an einem diagonalen Bild aus

Ein OSTraining-Kunde fragte nach einer Möglichkeit, Text neben einem diagonalen Bild auszurichten und gleichzeitig Platz zwischen beiden Elementen zu lassen.

Mein erster Gedanke war, an bestimmten Stellen des Textes Bruchkanten hinzuzufügen, aber das hat nicht funktioniert, weil die Seite responsive war.

Nach Rücksprache mit dem Kunden haben wir eine elegantere Lösung gefunden ...

Der Anwendungsfall

In diesem Beispiel muss der Text links und das Bild rechts ausgerichtet werden. Die eigentliche Herausforderung dabei ist, dass der Text das Bild nicht überlagern darf. Das gewünschte Ergebnis ist unten dargestellt:

Die Lösung

Wir können auf der rechten Seite schwebende leere Divs mit dynamischen Breitenwerten hinzufügen, um zu erzwingen, dass der Text das Bild nicht überlagert. Beachten Sie, dass in diesem Beispiel das Bild mit CSS als Hintergrund hinzugefügt wird.

Der HTML-Code

Der HTML-Code für dieses Beispiel sieht so aus:

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

Sie können die mehreren leeren Divs mit Abstandsklasse bemerken. Diese Elemente in Kombination mit etwas CSS erzeugen den Abstand zwischen Text und Bild.

Die Anzahl der Abstands-Divs entspricht der Anzahl der Textzeilen, die zum Ausfüllen der Bildhöhe erforderlich sind. In diesem Beispiel soll das Bild mit 14 Zeilen bedeckt werden.

Das CSS

Ich werde das erforderliche CSS zur besseren Erklärung in mehrere Teile aufteilen.

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

Definiert das Bild als Hintergrund mit einer bestimmten Position und Größe.

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

#container p Selektor verweist auf den Text. Es ist sehr wichtig, die Schriftgröße und Zeilenhöhe zu definieren, um später die Werte anderer Eigenschaften zu berechnen.

 .spacing {  float: right;  clear: right;  height: 22px; }

Diese Eigenschaft weist die leeren Divs an, rechts zu schweben. Beachten Sie, dass der Wert für height derselbe ist, den wir für line-height in den Absätzen verwenden.

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

Der obige Code ist der lustige Teil, der möglicherweise die Verwendung eines Taschenrechners erfordert.

Der für .spacing :nth-child(1) gewählte Breitenwert gilt für das erste div mit der Abstandsklasse, ebenso definiert .spacing:nth-child(2) eine etwas kleinere Breite und so weiter, bis es das Abstandselement erreicht Nummer 14.

Der Grund, dynamische Werte von höher nach niedriger für jedes leere div auf der rechten Seite zu definieren, ermöglicht es, den Text linksbündig zu halten, ohne das Bild zu überlagern.

Davon abgesehen, wie können wir die Breite jedes dieser leeren Divs berechnen? Die Antwort erfordert eine kleine Formel basierend auf den Werten von:

• Zeilenhöhe für den Text (22px in meinem Beispiel)
• background-size (300px in diesem Beispiel)

Die Breite für das erste leere Div beträgt 305 Pixel. Dies ist der Wert der Breite des definierten Hintergrunds plus 5 zusätzliche Pixel, die ich einschließen wollte, um zu vermeiden, dass der Text zu näher am Bildrand liegt.

Reaktionsschnelle Unterstützung

Mit dem Beispielcode funktioniert das Design in jeder Bildschirmgröße. Sehen Sie sich die Demo an und ändern Sie die Größe des Browsers, um es in Aktion zu sehen.

Sehen Sie sich eine Demo an

Prämie: WENIGER

Eine Alternative zum direkten Aufruf von CSS ist LESS. Wir haben ein Tutorial, wenn Sie neu bei LESS sind.

Sie können das gleiche Ergebnis mit LESS generieren, um die mehrfachen Breitenwerte für jedes div mit Abstandsklasse einfach dynamisch zu erstellen, ohne sich um Mathematik zu kümmern.

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

Legen Sie die Höhe für den Text und die Hintergrundbreite über die Variablen fest.

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

Die Eigenschaften des Containers.

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

Die Text- und Abstandseigenschaften werden dynamisch basierend auf einigen Variablen berechnet.

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

Die Schleife, die die dynamische Breite für alle leeren Divs generiert.

Testen Sie diesen Code in Codepen