Как сделать без наплыва блочный элемент?

Question

[Legal Adviser]

Всем привет.

Структура имеет вид - см. картинку 1.

Картинка блоком обтекает слева текст и всегда ширина 300px, а по вертикали - auto. Если появляются любые блочные элементы с любыми псевдоэлементами или, как в примере, в виде маркированного/нумерованного списка, то блок картинки наплывает на другой блочный элемент.
Картинка 1

Вариант 1 css:

list-style: none;
list-style-position: outside;

Вариант 2 css (стандартные маркеры):
list-style-position: outside;

Такая же проблема становиться и с выделенными абзацами (<p></p>) в WP через гутенберг.
Может кто знает как решить такую проблемку?
Может кто что может порекомендовать чтобы избежать наплыва блочных элементов?

Comments

[Ankhena]

Прочитайте, пожалуйста, правила сервиса и оформите код в песочницу jsfiddle.net

А пока, можете, например, использовать list-style-image вместо абсолютов.

[Legal Adviser]

Ankhena, Как вариант.. Одна голова хорошо, а две лучше. СПС. Я что-то не подумал про это... Правда теперь картинку придётся рисовать )))

[Ankhena]

Legal Adviser, заинлайнте svg в css. Только не base64

Answer 1

[Артур Ш]

По внешнему виду похоже на то, что у вас float где-то, соответственно текст всегда будет обтекать картинку, если вы хотите чтобы текст был строго справа и снизу, то надо делать три блока картинка, текст справа, текст снизу, ну и позиционировать с помощью flex или grid.

Comments

[Legal Adviser]

А разве гридом или флексом можно сделать такое?
Просто в примере часть для вывода контента (в красном квадрате). По умолчанию блок с картинкой предусмотрен в этом месте, если картинку не прикрепить, то будет подложка 300Х300 с обтеканием текста.
Контент может содержать что угодно, но он всегда будет обтекать справа от картинки.
Просто хочу сделать так, чтобы любой контент обтекал аккуратно картинку, а не накладывался под или над. На сколько я понимаю флексы, то они всё равно будут блоками, но как бы "резиновыми". Но в любом случае они не будут аккуратно обтекать друг друга, а будут заполнять всё пространство по Х и У.

[Артур Ш]

Обтекание всегда будет таким, вы можете добавить отступы, но если список, например, полностью не помещается справа, то он частично уйдёт под картинку, собственно в этом смысл обтекания.