Come allineare il testo con un'immagine diagonale

Un cliente di OTraining ha chiesto un modo per allineare il testo accanto a un'immagine diagonale, mantenendo lo spazio tra i due elementi.

Il mio primo pensiero è stato quello di aggiungere linee di discontinuità in punti specifici del testo, tuttavia non ha funzionato perché il sito era reattivo.

Dopo aver parlato con il cliente abbiamo trovato una soluzione più elegante...

Il caso d'uso

In questo esempio, il testo deve essere allineato a sinistra e l'immagine a destra. La vera sfida qui è che il testo non deve sovrapporsi all'immagine. Il risultato che vogliamo è mostrato di seguito:

La soluzione

Possiamo aggiungere div vuoti che fluttuano sulla destra con valori di larghezza dinamici per forzare il testo a non sovrapporsi all'immagine. Nota, in questo esempio l'immagine viene aggiunta come sfondo con CSS.

L'HTML

L'HTML per questo esempio ha questo aspetto:

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

Puoi notare i multipli div vuoti con la classe di spaziatura . Questi elementi in combinazione con alcuni CSS generano la spaziatura tra il testo e l'immagine.

Il numero di div di spaziatura è uguale al numero di righe di testo necessarie per riempire l'altezza dell'immagine. In questo esempio l'immagine deve essere coperta con 14 linee.

Il CSS

Dividerò il CSS richiesto in più parti per una migliore spiegazione.

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

Definisce l'immagine come sfondo con una posizione e dimensioni specifiche.

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

Il selettore #container p fa riferimento al testo. È molto importante definire la dimensione del carattere e l'altezza della linea per calcolare i valori di altre proprietà in un secondo momento.

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

Questa proprietà dice ai div vuoti di fluttuare sulla destra. Nota, il valore per l' altezza è lo stesso che usiamo per l'altezza della linea nei paragrafi.

 .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; }

Il codice sopra è la parte divertente che potrebbe richiedere l'uso di una calcolatrice.

Il valore di larghezza scelto per .spacing:nth-child(1) si applicherà al primo div con classe di spaziatura, allo stesso modo .spacing:nth-child(2) definisce una larghezza leggermente inferiore e così via fino a raggiungere l'elemento di spaziatura numero 14.

Il motivo per definire valori dinamici dal più alto al più basso per ogni div vuoto a destra rende possibile mantenere il testo allineato a sinistra senza sovrapporre l'immagine.

Detto questo, come possiamo calcolare la larghezza di ciascuno di quei div vuoti? La risposta richiede una piccola formula basata sui valori di:

• altezza della riga per il testo (22px nel mio esempio)
• dimensione dello sfondo (300px in questo esempio)

La larghezza per il primo div vuoto è 305px, che è il valore della larghezza dello sfondo definito più 5 pixel extra che ho deciso di includere per evitare che il testo sia troppo vicino al bordo dell'immagine.

Supporto reattivo

Usando il codice di esempio, il design funzionerà bene in qualsiasi dimensione dello schermo. Dai un'occhiata alla demo e ridimensiona il browser per vederlo in azione.

Guarda una demo

Bonus: MENO

Un'alternativa all'andare direttamente ai CSS è LESS. Abbiamo un tutorial se non conosci LESS.

Puoi generare lo stesso risultato usando LESS per creare dinamicamente più valori di larghezza per ogni div con classe di spaziatura facilmente senza preoccuparti della matematica.

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

Decidi l'altezza del testo e la larghezza dello sfondo tramite le variabili.

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

Le proprietà del contenitore.

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

Le proprietà del testo e della spaziatura calcolate dinamicamente in base ad alcune variabili.

 .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);

Il ciclo che genera la larghezza dinamica per tutti i div vuoti.

Testare questo codice in Codepen