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

Question

[Michael_Romanov]

Добрый день!

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

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

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


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

Comments

[Rustam Bainazarov]

margin-top
margin-right
margin-left
margin-bottom

[Michael_Romanov]

Мне нужно, чтобы margin устанавливался в зависимости от float. Что-то типа:

figure.float:right {
    margin: 0 0 0 1rem;
}

figure.float:left {
    margin: 0 1rem 0 0;
}

[Антон Литвиненко]

Michael_Romanov, обычно это делается с помощью классов. alignlert, alignright, aligncenter

[Michael_Romanov]

У меня текст верстается с помощью rich text editor (CREditor), наподобие того, в котором я сейчас пишу это сообщение. Классы туда добавить вручную пользователь не может. Все, что он может, это указать для блока выравнивание (float:left, float:right). Нужно чтобы CSS стиль эти варианты смог различать и менять свое поведение нужным образом.

[Антон Литвиненко]

Michael_Romanov, Вы гляньте, может ваш редактор раздает классы или что-то в этом роде

Answer 1

[Евгений]

img[style="float: left;"] {
  margin-right: 10px;
}

Comments

[Michael_Romanov]

В конечном итоге все заработало! Подвох заключался в том, чтобы в CSS файле в точности воспроизвести стиль, используемый в свойстве объекта. В моем случае был лишний пробел и ненужный знак препинания. Как только исправил "float: left;" на "float:left", рецепт заработал. Спасибо!

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

Результат:
Как видим, отступа справа нет, хотя граница по идее должна быть 2rem.

Comments

[Антон Литвиненко]

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

Answer 3

[Роман]

Создаете 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')
});

Comments

[Michael_Romanov]

Извините, я не понял, как этот скрипт работает. Я вставил нужные фрагменты в файлы .css и .html (код скрипта обернул в таги и поместил в конце страницы. Но что-то не взлетело. Может, вместо '.article__content img' надо что-то свое подставить?
Еще я не понял принцип работы вашего алгоритма. У меня такое впечатление, что он просто чередует изображения, присваивая поочередно то левое выравнивание, то правое. Это не то, что мне нужно. Нужно следующее:

Если изображение выровнено по левому краю (хардкодом в HTML коде) , то в CSS файле присваиваем ему стиль margin: 0 2rem 0 0. Если изображение выровнено вправо , то в CSS файле стиль будет margin: 0 0 0 2rem.

Чередование изображений не имеет здесь никакого значения, только их стиль, зашитый в коде страницы..

[Роман]

Michael_Romanov, 'article__content img' — это пример селектора для поиска изображений внутри статьи.
К примеру, с такой структурой:

<article class="article">
  <h2 class="article__heading">Заголовок</h2>
  <div class="article__content">
    <p>Lorem ... <img src="" alt="image"> ...</p>
    ...
    <p>Lorem ... <img src="" alt="image"> ...</p>
  </div>
</article>

Предполагается, что есть блок статьи. У нее есть заголовок и содержимое (content). В содержимом есть абзацы с текстом и изображениями.

Скрипт ищет все изображения в '.article__content', а потом присваивает им нужные классы, с чередованием.

[Роман]

HTML

<img class="float-right">
<img class="float-left">

CSS

img[class="float-right"] {
  margin: 0 0 0 2rem;
}
img[class="float-left"] {
  margin: 0 2rem 0 0;
}

[Michael_Romanov]

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