Автоматическое добавление отступов к изображениям, когда они плавают

Question

У меня есть CMS, которая позволяет пользователю добавлять float: right; или float: left; к изображениям, которые они помещают в свой текстовый редактор.Тогда я не хочу вручную вставлять отступы, поэтому я пытался найти способ включить это по умолчанию.

Я знаю, как это сделать с классом, но мне любопытно, еслиесть способ указать либо в CSS, либо с помощью небольшого количества jquery, например, когда изображение имеет свойство float: left , оно также получает заполнение : 0 10px 10px 0 рендеринг.

Любые предложения будут оценены.

Спасибо

Answer 1

Если вы хотите использовать CSS, пользователю нужно либо указать класс, который имеет оба свойства, либо ввести оба свойства (float и margin).

Вы можете использовать jQuery, и сделайте это.динамически.

$("element").css("float") вернет либо left, либо right, если элемент действительно является плавающим.Вы можете поместить это в оператор if () и соответственно применить margin.

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

Answer 2

if ($('img.class').css('float') == 'left'){
    $('img.class').css('padding', 0);
    $('img.class').css('margin','10px 10px 0');
}