Обтекание картинок списками ul, ol, li

обтекание картинок списками

Наверное все сталкивались с проблемой верстки, когда списки ul, ol, li наползают на изображение с обтеканием float:left. Случается эта проблема из-за особенностей верстки, так как довольно часто приходится использовать родительское позиционирование блоков (position: relative), а также из-за того, что исходя с макета нам нужно навесить на нумерованный или ненумерованный список свои изображения.

В этой статье я расскажу вам как очень просто можно решить проблему обтекание картинок списками не зависимо от того какие css стили будут навещенные на ваш список этот метод работает.

На рис. 1 представленная проблема, когда при обтекании float картинки, список li наползает на нее сверху:

трабл обтекание картинок списками

Маркеры списка наползли и накрыли сверху изображение с обтеканием float:left и такую верстку вряд ли кто примет если заметит ошибку.

 

Решение проблемы с обтеканием картинок списками

Решение трабла с обтеканием картинок списками очень простое, для этого нужно навесить на тег UL или OL (или на их оба) CSS свойство overflow: hidden и все, ваша проблема решена:

обтекание картинок списками

Рис. 2

Привожу полный код CSS для изображение с обтеканием слева а также для списка:

img.alignleft{
float: left;
margin-bottom: 15px;
margin-right: 20px;
}

ul{
display: block;
overflow: hidden;
position: relative;
}

ul li {
line-height: 1.2em;
}

Для чистоты эксперимента, стоит заметить, что из всего выше описанного главное свойство CSS для того чтоб сделать правильное обтекание картинок списками ul, ol, li - overflow: hidden; при этом остальные свойства могут отличаться от моих. На рис. 2 видно, что отступ от изображения сохранился такой же как он должен быть без обтекания и это правильно, ведь на месте обычного маркера может быть подмена списка картинкой 🙂 

Также учтите, если навесить свойство overflow:hidden только на UL и OL то список будет идти ровно, - обтекает картинку и не уходит в лево когда изображение закончилось, как на рис. 3

обтекание картинок списками при UL OL

Рис. 3

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

Если же, сделать свойство overflow:hidden только для тега LI, то мы получив результат представленный на рисунке 4.

обтекание картинок списками при LI

Рис. 4

Как мы видим, список уходит влево когда изображение закончилось и таким образом у нас нет проблем с форматированием, ведь отступы везде одинаковые, то есть у нас правильное обтекание картинок списками !

Таким же способом можно управлять форматированием других тегов на странице html при верстке сложных сайтов, например, правильное обтекание изображений блоками div.

Вариации свойства css overflow:hidden позволят вам легко достичь нужного результата и не переживать о том, что нужно каждый раз проверять правильность форматирования когда с использованием тега img с float:left и ul ol.

На этом уроке ми узнали как правильно сделать обтекание изображения списком UL и OL (или же просто LI). Решение проблемы очень простое, желаю всем удачи и до новых встреч.

Подписывайтесь на наши новости и жмите лайк.

Комментарии к записи «Обтекание картинок списками ul, ol, li»:
  1. Игорь:

    Добрый день!
    У меня при добавлении CSS свойства overflow: hidden стандартные маркеры в списке просто исчезли.

    • admin:

      Вы только для ul делали overflow: hidden; или может и для li.
      Если сделать только для ul то должно норм работать.

  2. Евгений:

    Решение трабла с обтеканием картинок списками очень простое, для этого нужно навесить на тег UL или OL (или на их оба) CSS свойство overflov:hiden и все, ваша проблема решена

    Уважаемый, вы с юмором я смотрю человек.
    Скопировал не глядя, не работает, сначала исправил w в оверфлоу, снова не работает, еле догнал что ещё и хидден с ошибкой. 2 ошибки в двух словах это мощно

    • admin:

      За ошибку конечно спасибо и сори, исправил, бывает.
      Только ж листинг кода для кого я забросил :). Там все правильно, так как код копировал с рабочего примера.

  3. Сергей:

    Только одно. Для рисунка 4, для списка надо указать background-image, потому что стандартный вид circle, square и прочие становятся невидимыми.

  4. Сергей:

    Спасибо! Исчерпывающая вопрос публикация!

Сделать заказ
Онлайн помощь по WordPress