@Michael_Romanov

Как сделать условный margin (разный в зависимости от выравнивания float:left, float:right)?

Добрый день!

Задача -- красиво выравнивать изображение (можно другой объект, такой как или ) по левому или правому краю, с обтеканием текстом. Внешний край объекта должен быть выровнен строго по границе колонки текста, а внутренний обтекаться текстом с некоторым отступом.

Т. е., если картинка выровнена влево, левый margin должен быть 0, правый -- например, 1rem. Если изображение выровнено вправо, то наоборот, левый margin 1rem, правый -- 0.

Сделать это требуется с помощью стилей CSS, т. к. текст создается пользователями и вставлять туда стили вручную я не могу. Мне кажется, я где-то видел готовое решение, поэтому я думаю, что оно существует, но не запомнил, где и как.

6007d12f14e3f758606937.png
Скриншот иллюстрирует размещение изображений с нулевым отступом. Видно, что текст прилипает. Нужно с помощью CSS сделать у левой картинки границу справа, а у правой -- слева.
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
img[style="float: left;"] {
  margin-right: 10px;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Michael_Romanov Автор вопроса
Супер! Кажется это то, что нужно. Спасибо, Евгений! Побежал проверять, но думаю, что сработает! :))))

UPD: Не работает, хотя по идее должно бы :( Что я делаю не так?
Код в шаблоне article_detail.html:
<figure class="image" style="float:left">
     <img alt="" height="135" src="/media/news/2021/01/falco_vespertinus.jpeg" width="200" />
     <figcaption>Фото: wikipedia.org/Martin Mecnarowski</figcaption>
</figure>

Код в project.css:
figure[style="float: left;"] {
  margin-right: 2rem;
}
figure[style="float: right;"] {
  margin-left: 2rem;
}

Результат: 6007e78454823996938427.png
Как видим, отступа справа нет, хотя граница по идее должна быть 2rem.
Ответ написан
RomanTRS
@RomanTRS
Создаете 2 класса:
.float-left {
  float: left;
  margin: 1rem 1rem 1rem 0;
}
.float-right {
  float: right;
  margin: 1rem 0 1rem 1rem;
}

и присваиваете их, по мере надобности. Вручную или автоматически через JS:
const classChoice = (elementsSelector, className1, className2) => {
	let images = document.querySelectorAll(elementsSelector);
  for (let i=0; i<images.length; i++) {
    if (i%2 === 0) {
      images[i].classList.add(className1);
    } else {
      images[i].classList.add(className2);
    }
  }
};

window.addEventListener('DOMContentLoaded', (event) => {
  classChoice('.article__content img', 'float-right', 'float-left')
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы