Обтекание элемента без удаления из потока?

Question

[Дмитрий Мельник]

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

Спасибо Сергею, решение.

Answer 1

[Сергей]

все просто, откажитесь от абсолютного позиционирования и используйте inline-block тип
UPD:
https://jsfiddle.net/e7uqatee/

Comments

[Дмитрий Мельник]

да, это решило бы проблему, но тут моя вина, некорректно составил пример. Длина элемента списка железно будет больше одной строки, а нумерация должна быть именно вынесена влево. не хотелось бы в li городить вложенности с разбиением на колонки, но пока не вижу другого выхода

[Сергей]

Дмитрий Мельник: ща...

[Сергей]

Дмитрий Мельник: а так? просто добавив псевдоэлементу float https://jsfiddle.net/d5hLzbxL/

[Сергей]

могу вертикально по центру сделать )) правда тогда нарушится визуальное разделение элементов списка

[Дмитрий Мельник]

Сергей: да, хорошая версия, но зависит от высоты псевдоэлемента. а я почти обрадовался =)

[Дмитрий Мельник]

можно ли в данном случае как-то растянуть before на всю высоту? float делает элемент блочным, но height 100% не работает. странно

[Сергей]

Дмитрий Мельник: height 100% не работает потому-что inline-block

[Сергей]

Сергей: не совсем понимаю в чем проблема с высотой псевдоэлемента?

[Дмитрий Мельник]

Сергей: сейчас высота before 30px что соответсует чуть больше чем высота одной строки, как только строк становится >2, они не упираются в before и свободно обтекают его.
Пока самый приемлимый вариант такой: https://jsfiddle.net/pvsxyaxp/6/
Но это дикий костыль, я потом карму не очищу

[Сергей]

Дмитрий Мельник: а теперь понял, мой косяк... ща ченить придумаю

[Сергей]

Дмитрий Мельник: https://jsfiddle.net/e7uqatee/ вернулись к абсолютному позиционированию, но без указания left right top bottom... просто выкинули псевду из потока, потом сместили через translateX и margin-left, а li сместили через left relative, задав padding-right для ol чтобы не выпасть за экран

[Сергей]

Сергей: можно даже translateX было не делать, а все задать марджином, но мне больше нравится смещение всего блока, а потом уже задание модификаторов -)) так проще файнтюнинг потом делать, опять же если поменять размер псевды все останется на своих местах, а с марджином придется его тоже исправлять

[Дмитрий Мельник]

Сергей: отлично, только overflow у Ol убрать, спасибо!

Answer 2

[Кирилл]

Задайте для ol display: inline-block;
Или overflow: hidden;
И погуглите что такое clearfix

Comments

[Дмитрий Мельник]

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