Плавающая проблема с меньшим размером экрана

Question

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

Я настроил пример здесь - http://jsfiddle.net/ubernoob/tYeGR/

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

Как я могу кодировать это, чтобы ссылка переходила в многострочное и оставляла изображение всплывающим рядом с ним?

Answer 1

Попробуйте поставить <img> тег перед <h3> и удалить float:left из <h3>

Я редактировал jsfiddle: http://jsfiddle.net/tYeGR/7/

Answer 2

Вы можете абсолютно точно расположить изображения в их рядах, а затем добавить некоторые отступы к элементам <h3>, чтобы ссылки не покрывались изображениями:

.list img {
    position : absolute;
    right    : 10px;
}
.list h3 {
    float      : left;
    font-size  : 12px;
    padding    : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/
    min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/
}

Вот jsfiddle, чтобы возитьсявокруг с: http://jsfiddle.net/jasper/tYeGR/19/

Answer 3

этот пример работает: http://jsfiddle.net/jalbertbowdenii/tYeGR/18/ но я изменил ваши поплавки на абсолютно позиционирование IMG.если этого недостаточно, @mediaqueries - это то, что нужно.я попробовал два в jsfiddle, но ни в коем случае.возможно ошибка пользователя.