Как выровнять текст с диагональным изображением

Опубликовано: 2022-02-16
текст по диагонали изображения

Один клиент OSTraining попросил способ выравнивания текста рядом с изображением по диагонали, сохраняя при этом пространство между обоими элементами.

Моей первой мыслью было добавить линии разрыва в определенных точках текста, однако это не сработало, потому что сайт был адаптивным.

Пообщавшись с заказчиком, мы придумали более изящное решение...

Вариант использования

В этом примере текст нужно выровнять по левому краю, а изображение по правому. Настоящая проблема здесь заключается в том, что текст не должен накладываться на изображение. Результат, который мы хотим, показан ниже:

2

Решение

Мы можем добавить пустые элементы div, плавающие справа, с динамическими значениями ширины, чтобы текст не перекрывал изображение. Обратите внимание, что в этом примере изображение добавляется в качестве фона с помощью CSS.

1

HTML

HTML для этого примера выглядит следующим образом:

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

Вы можете заметить несколько пустых div с классом интервалов . Эти элементы в сочетании с некоторым CSS создают интервал между текстом и изображением.

Количество разделителей равно количеству строк текста, необходимых для заполнения изображения по высоте. В этом примере изображение должно быть покрыто 14 линиями.

CSS

Я разделю требуемый CSS на несколько частей для лучшего объяснения.

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

Определяет изображение как фон с определенным положением и размером.

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

Селектор #container p ссылается на текст. Очень важно определить размер шрифта и высоту строки для последующего вычисления значений других свойств.

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

Эти свойства сообщают пустым элементам div, что они плавают справа. Обратите внимание, что значение высоты такое же, как и для высоты строки в абзацах.

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

Приведенный выше код — забавная часть, которая может потребовать использования калькулятора.

Значение ширины , выбранное для .spacing:nth-child(1) , будет применяться к первому div с классом интервала, таким же образом .spacing:nth-child(2) определяет немного меньшую ширину и так далее, пока не достигнет элемента интервала . номер 14.

Причина определения динамических значений от большего к меньшему для каждого пустого div справа позволяет выровнять текст по левому краю без наложения изображения.

4

При этом как мы можем рассчитать ширину каждого из этих пустых элементов div? Для ответа требуется небольшая формула, основанная на значениях:

  • высота строки для текста (22px в моем примере)
  • background-size (300px в этом примере)

Ширина первого пустого элемента div составляет 305 пикселей, что равно значению заданной ширины фона плюс 5 дополнительных пикселей, которые я решил включить, чтобы текст не располагался слишком близко к краю изображения.

Отзывчивая поддержка

Используя пример кода, дизайн будет хорошо работать на любом размере экрана. Посмотрите демо и измените размер окна браузера, чтобы увидеть его в действии.

Посмотреть демо

Бонус: МЕНЬШЕ

Одной из альтернатив непосредственному переходу к CSS является LESS. У нас есть учебник, если вы новичок в LESS.

Вы можете сгенерировать тот же результат, используя LESS для динамического создания нескольких значений ширины для каждого div с классом интервалов , легко, не беспокоясь о математике.

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

Определите высоту текста и ширину фона с помощью переменных.

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

Свойства контейнера.

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

Свойства текста и интервалов рассчитываются динамически на основе некоторых переменных.

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

Цикл, который генерирует динамическую ширину для всех пустых элементов div.

Протестируйте этот код в Codepen