Текущий текст с минимальной шириной столбца вокруг плавающего изображения

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

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

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

Я пытаюсь найти простой и общий способ сделать это. Это для блога - я хочу иметь возможность добавить изображение и текст, возможно, добавить класс или вставить немного разметки (вздох), и у меня получится поток работ. Я бы предпочел делать это с помощью CSS и HTML только потому, что трудно вставить JavaScript в сообщения блога. У меня есть несколько методов (см. Мои ответы), но ни один из них не является удовлетворительным. Вы можете сделать лучше?

Ответы на вопрос(4)

Ваш ответ на вопрос