Как обернуть неупорядоченный список вокруг изображения?

Question

В HTML я пытаюсь обернуть тег ul вокруг изображения. Мне нужно правильное количество тегов li, чтобы изображение не перекрывало изображение, независимо от того, насколько оно высокое или короткое. Пока что я могу получить содержимое тегов li для обтекания изображения, но не могу заставить сами li обернуть вокруг изображения. Поскольку каждый тег li имеет нижнюю границу, этого недостаточно. Вы можете увидеть, где у меня это сейчас находится здесь:

http://jsfiddle.net/BBmER/

Как обернуть неупорядоченный список вокруг изображения, чтобы даже теги li не перекрывали изображение?

Answer 1

Дайте элементу ul достаточно отступов слева или справа, чтобы он не перекрывал ваше изображение. Например, если ваше изображение смещено влево и имеет ширину 300 пикселей, тогда ваш элемент ul должен быть:

<ul style="padding-left:300px">

или

<ul style="padding-left:320px">

если вам нужно пространство между ними.

Answer 2

Я немного изменил вашу новую скрипку, это то, что вы ищете?

http://jsfiddle.net/BBmER/21/

То, что я сделал, я

1. Удаленопоплавок из описания и вместо этого просто дал ему левое поле (в то же время удалило правое поле с метки, так как оно больше не нужно)
2. Убрал трюк очистки с li s, потому что он былнажатие второго li под изображением и
3. Добавлено clear: left; на элемент li на случай, если у вас длинная метка.

Это не меняеттот факт, что элементы li перекрывают изображение, но по крайней мере элементы метки и описания расположены правильно.

Answer 3

Вы можете сделать это с некоторым запасом и непрозрачным изображением.Смотрите обновленный jsFiddle .

CSS:

body {
    font-family: arial, verdana, sans-serif;
    font-size:13px;
}

ul li {
    margin-bottom:15px;
    border-bottom:1px solid grey;
}

img {
    float: right;
    padding: 0 0 15px 15px;
    opacity: 1;
    background: #fff;
    margin: 0 0 10px 10;
}

Answer 4

Как насчет добавления overflow:hidden; к тегу LI:http://jsfiddle.net/BBmER/153/