Jak wyrównać tekst z obrazem po przekątnej

Jeden z klientów OSTraining poprosił o sposób wyrównania tekstu obok ukośnego obrazu, przy jednoczesnym zachowaniu odstępu między obydwoma elementami.

Moją pierwszą myślą było dodanie linii nieciągłości w określonych punktach tekstu, jednak to nie zadziałało, ponieważ witryna była responsywna.

Po rozmowie z klientem wymyśliliśmy bardziej eleganckie rozwiązanie...

Przypadek użycia

W tym przykładzie tekst musi być wyrównany do lewej, a obraz do prawej. Prawdziwym wyzwaniem jest tutaj to, aby tekst nie nakładał się na obraz. Pożądany przez nas wynik jest pokazany poniżej:

Rozwiązanie

Możemy dodać puste elementy div pływające po prawej stronie z dynamicznymi wartościami szerokości, aby tekst nie nakładał się na obraz. Uwaga, w tym przykładzie obraz jest dodawany jako tło w CSS.

HTML

Kod HTML tego przykładu wygląda tak:

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

Możesz zauważyć wiele pustych elementów div z klasą odstępów . Te elementy w połączeniu z niektórymi CSS generują odstępy między tekstem a obrazem.

Liczba elementów div odstępów jest równa liczbie wierszy tekstu wymaganych do wypełnienia wysokości obrazu. W tym przykładzie obraz musi być pokryty 14 liniami.

CSS

Dla lepszego wyjaśnienia podzielę wymagany CSS na kilka części.

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

Definiuje obraz jako tło o określonej pozycji i rozmiarze.

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

#container p selektor odwołuje się do tekstu. Bardzo ważne jest zdefiniowanie rozmiaru czcionki i wysokości linii, aby później obliczyć wartości innych właściwości.

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

Ta właściwość mówi pustym elementom div, aby unosiły się po prawej stronie. Zauważ, że wartość wysokości jest taka sama, jakiej używamy do wysokości linii w akapitach.

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

Powyższy kod to zabawna część, która może wymagać użycia kalkulatora.

Wartość szerokości wybrana dla .spacing:nth-child(1) będzie miała zastosowanie do pierwszego elementu div z klasą spacing, w ten sam sposób .spacing:nth-child(2) zdefiniuje nieco mniejszą szerokość i tak dalej, aż dotrze do elementu spacing numer 14.

Powód zdefiniowania wartości dynamicznych od wyższych do niższych dla każdego pustego elementu po prawej stronie umożliwia zachowanie wyrównania tekstu do lewej bez nakładania obrazu.

Biorąc to pod uwagę, jak możemy obliczyć szerokość każdego z tych pustych elementów div? Odpowiedź wymaga małej formuły opartej na wartościach:

• wysokość wiersza dla tekstu (w moim przykładzie 22px)
• background-size (300px w tym przykładzie)

Szerokość pierwszego pustego elementu div to 305px, co jest wartością zdefiniowanej szerokości tła plus 5 dodatkowych pikseli, które zdecydowałem się dołączyć, aby tekst nie znajdował się zbyt blisko krawędzi obrazu.

Responsywne wsparcie

Korzystając z przykładowego kodu, projekt będzie działał dobrze w każdym rozmiarze ekranu. Obejrzyj demo i zmień rozmiar przeglądarki, aby zobaczyć ją w akcji.

Zobacz demo

Premia: MNIEJ

Jedną z alternatyw do bezpośredniego przejścia do CSS jest Mniej. Mamy samouczek, jeśli jesteś nowy w LESS.

Możesz wygenerować ten sam wynik za pomocą LESS, aby dynamicznie tworzyć wiele wartości szerokości dla każdego elementu div z klasą odstępów , bez martwienia się o matematykę.

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

Określ wysokość tekstu i szerokość tła za pomocą zmiennych.

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

Właściwości kontenera.

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

Właściwości tekstu i odstępów obliczane dynamicznie na podstawie niektórych zmiennych.

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

Pętla, która generuje dynamiczną szerokość dla wszystkich pustych elementów div.

Przetestuj ten kod w Codepen