Cum să aliniați textul cu o imagine diagonală

Un client OSTraining a cerut o modalitate de a alinia textul lângă o imagine diagonală, păstrând în același timp spațiu între ambele elemente.

Primul meu gând a fost să adaug linii de întrerupere în anumite puncte ale textului, dar asta nu a funcționat, deoarece site-ul era receptiv.

După ce am vorbit cu clientul am venit cu o soluție mai elegantă...

Cazul de utilizare

În acest exemplu, textul trebuie aliniat la stânga, iar imaginea la dreapta. Adevărata provocare aici este că textul nu trebuie să suprapună imaginea. Rezultatul pe care îl dorim este prezentat mai jos:

Soluția

Putem adăuga div-uri goale care plutesc în dreapta cu valori dinamice ale lățimii pentru a forța textul să nu suprapună imaginea. Rețineți, în acest exemplu imaginea este adăugată ca fundal cu CSS.

HTML-ul

HTML-ul pentru acest exemplu arată astfel:

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

Puteți observa multiplele div-uri goale cu clasa de spațiere . Aceste elemente în combinație cu unele CSS generează distanța dintre text și imagine.

Numărul de div-uri de spațiere este egal cu numărul de linii de text necesare pentru a umple înălțimea imaginii. În acest exemplu, imaginea trebuie acoperită cu 14 linii.

CSS-ul

Voi împărți CSS-ul necesar în mai multe părți pentru o explicație mai bună.

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

Definește imaginea ca fundal cu o anumită poziție și dimensiune.

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

Selectorul #container p face referire la text. Este foarte important să definiți dimensiunea fontului și înălțimea liniei pentru a calcula mai târziu valorile altor proprietăți.

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

Această proprietate le spune div-urilor goale să plutească pe dreapta. Rețineți, valoarea pentru înălțime este aceeași pe care o folosim pentru înălțimea liniei în paragrafe.

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

Codul de mai sus este partea distractivă care poate necesita utilizarea unui calculator.

Valoarea lățimii aleasă pentru .spacing:nth-child(1) se va aplica primului div cu clasa de spațiere, în același mod .spacing:nth-child(2) definește o lățime puțin mai mică și așa mai departe până când ajunge la elementul de spațiere numarul 14.

Motivul pentru a defini valori dinamice de la mai mare la mai jos pentru fiecare div gol din dreapta face posibilă menținerea textului aliniat la stânga fără a suprapune imaginea.

Acestea fiind spuse, cum putem calcula lățimea fiecăruia dintre acele div-uri goale? Răspunsul necesită o formulă mică bazată pe valorile:

• line-height pentru text (22px în exemplul meu)
• dimensiunea fundalului (300px în acest exemplu)

Lățimea pentru primul div gol este de 305px, care este valoarea lățimii fundalului definit plus 5 pixeli suplimentari pe care am decis să includ pentru a evita ca textul să fie prea aproape de marginea imaginii.

Suport receptiv

Folosind codul exemplu, designul va funcționa bine în orice dimensiune de ecran. Aruncă o privire la demo și redimensionează browserul pentru a-l vedea în acțiune.

Vedeți o demonstrație

Bonus: MAI puțin

O alternativă pentru a merge direct la CSS este LESS. Avem un tutorial dacă sunteți nou la LESS.

Puteți genera același rezultat folosind LESS pentru a crea în mod dinamic valorile multiple de lățime pentru fiecare div cu clasă de spațiere cu ușurință, fără a vă face griji de matematică.

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

Decideți înălțimea pentru text și lățimea fundalului prin variabile.

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

Proprietățile containerului.

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

Proprietățile text și spațiere calculate dinamic pe baza unor variabile.

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

Bucla care generează lățimea dinamică pentru toate div-urile goale.

Testați acest cod în Codepen