Обтекание текста вокруг изображения там, где оно занимает последнее место в источнике. Жидкий макет

Question

У меня есть изображение, которое я хочу обернуть вокруг него текстом. например

ttttttt|image|    
ttttttt|     |
tttttttttttttt
tttttttttttttt

Это было бы легко, если бы изображение было перед текстом в исходном коде. Тем не менее, мне нужно изображение после текста, как это:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст ИЗОБРАЖЕНИЕ

Я не знаю размеров изображения или ширины текста (так как макет жидкий)

Я не хочу использовать JS

Очень признателен

Answer 1

Просто примечание для другого способа сделать это...

Пока вы счастливы, что изображение будет первым в источнике (чтобы его можно было плавать), вы можете использовать display:table-caption, чтобы перевернуть источник на маленьких экранах, где изображение не плавает так,

БОЛЬШОЙ ЭКРАН

img{
float:left;
}

МАЛЕНЬКИЙ ЭКРАН

.container{
display:table;
caption-side: bottom;
}

img{
float:none;
display: table-caption;
}

Надеюсь, что это помогает кому-то, пытающемуся сделать что-то подобное. Если это не очевидно, пришлите мне записку, и я вставлю код.

Answer 2

Вы можете сделать это двумя способами.

В теге изображения:

 <img src="http://www.wesleyeterry.com/apple-touch-icon-precomposed.png" align="left" vspace="4" hspace="4">

Или в CSS:

<style>
img {
float:left;
margin:2px;
}

http://www.wesleyeterry.com/apple-touch-icon-precomposed.png

Answer 3

Я думаю, что у меня есть решение моего собственного вопроса.

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

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

Вот как я это сделал:

Добавьте изображение дважды. Сначала перед текстом. Убедитесь, что "alt" пуст.

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

Оберните изображения и текст в div и установите для него "display: относительный"

Установите первое изображение, чтобы оно плавало вправо, а его видимость было скрыто. Установите 2-е изображение в положение: абсолютное и поместите его поверх изображения (легко с отображением относительно контейнера)

Плавающее изображение действует как поплавок для абсолютно позиционированного изображения, и нам не нужно использовать JS для обработки каких-либо размеров, поэтому при использовании максимальной ширины изображение будет уменьшаться, а текст все равно будет работать как следует (без какого-либо вызова возвращается к JS, чтобы получить новые размеры)

Затем, используя медиа-запрос для маленького экрана, я установил для первого изображения "display:none" и не применил абсолютную позицию ко 2-му изображению. Таким образом, что касается пользователя, он видит контент, за которым следует изображение.

Кажется, хорошо работает в моих начальных тестах, но похоже на взлом. Возможно, я мог бы сделать что-то с flex-box, но я оставлю это в другой раз. Если кто-то знает лучшее решение или может придумать причину, почему это действительно плохо, пожалуйста, дайте мне знать!