Переместить изображение между 2 столбцами текста

Question

Я хотел бы знать, возможно ли воспроизвести в CSS / HTML эффект, который вы видите в этом журнале, с изображением, расположенным между 2 столбцами текста и текстом, обертывающим его:

Я знаю, что только современные браузеры поддерживают макеты с двумя столбцами, поэтому мои вопросы:

1. Можно ли это сделать в современных браузерах? Если так, то как? По сути, мы делаем "float: both", но, разумеется, этой директивы не существует ....
2. Есть ли какой-нибудь обратно совместимый хак, чтобы сделать это в старых браузерах?

Наконец, если вы можете сделать это в HTML / CSS, я бы подумал, что изображение все равно должно быть квадратным, чтобы эффект обтекания не был таким органичным, как здесь. Возможно ли воспроизвести эффект точно, вместо того, чтобы иметь квадрат изображения с пробелами, например, слева и справа от головы Рона Пола? Вы должны были бы нарезать изображение, чтобы достигнуть этого?

Answer 1

Это нелегко сделать (особенно для динамического текста).У всех техник есть свои недостатки.

Вот один из возможных приемов для "поплавкового центра":

http://css -tricks.com / 9048-float-center /

Для современных браузеров , есть плагин jQuery, который может это сделать точно :

http://www.jwf.us/projects/jQSlickWrap/

Вот утомительная, ручная версия, которая вдохновила вышеупомянутый плагин jQuery:

http://www.alistapart.com/articles/sandbags

Answer 2

Curvelicious В противном случае Эрик Мейер известен как рваный поплавок.
Также Мешки с песком