проблемы с <UL>и <LI>стилем без исправления

Question

Я пытаюсь создать список, который будет плавать с правой стороны изображения. Итак, прежде всего, чтобы лучше понять, вот скрипка:

http://jsfiddle.net/xpGbD/1/

И список, и изображение содержатся внутри плавающего DIV. Я стремлюсь к тому, чтобы в списке была пара Key: Value, но некоторые значения намного длиннее других.

Это создает проблему: когда значение больше (DIV) - (Изображение), список переходит НАД выше изображения, ЕСЛИ Я не задаю фиксированную ширину для списка, когда всплывает вправо.

Проблема в том, что у меня нет фиксированной ширины IMG, поэтому, если ширина изображения составляет, например, 100 пикселей, это приведет к большому разрыву между списком и изображением.

С другой стороны - если я исправлю ширину элементов LI, она будет работать, но сломается, если ширина изображения станет больше ...

Итак, вопросы:

Как мне разместить элементы LIST справа от изображения без указания ширины ??

Ps - еще одна связанная проблема: в текущем состоянии - когда список VALUE длинный, ключ располагается над значением. Я хотел бы, чтобы он начинался с той же строки, и, если необходимо, должен течь, течь ниже ЗНАЧИТЕЛЬНОЙ области, а не ключевой области (отсюда и)

Answer 1

Дайте мне посмотреть, понял ли я смысл ... Когда вы пытаетесь создать плавающие элементы HTML с неизвестной шириной, установите свойство CSS

display: inline;

Для всех перемещаемых элементов.

Обратите внимание, что элементы с различной шириной не будут иметь упорядоченного вида сетки (табличного представления). Если вы хотите табличное представление: тогда вы должны указать ширину или использовать тег таблицы.

Надеюсь, это поможет вам.

Answer 2

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

Посмотрите, не было фиксированной ширины в блоке div ...

http://jsfiddle.net/xpGbD/11/

Попробуйте изменить размер изображения и посмотреть, работает ли он, как вы хотите.

Тот, у которого минимальная ширина:

http://jsfiddle.net/xpGbD/12/

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

Answer 3

Еще не дошли до абсолютного позиционирования?

http://jsfiddle.net/k4Rh8/