CSS отображаемое изображение в двух столбцах (разделено по числу столбцов)

Question

У меня есть div, который разделен на 2 столбца, используя:

column-count: 2;
column-gap: 20px;

Внутри этого у меня теперь есть изображение: http://img823.imageshack.us/img823/6710/herpt.png Я хочу, чтобы это изображение было в обеих колонках, поэтому я попытался с

    column-span:all

http://img339.imageshack.us/img339/8664/derpv.png, но это уничтожает поток текста, теперь он состоит из двух блоков со столбцами, один над и один под изображением, но я хотел бы сохранить обычный поток и отделить отдельные столбцы.

Answer 1

Вот что column-span, как это определено , определено , должно делать:

Пример XX

В этомНапример, элемент h2 был добавлен в образец документа после первого предложения в четвертом предложении (т. е. после слова «jkl.»).Этот стиль применяется:

h2 { column-span: all; background: silver }  
img { display: none }

При установке для параметра column-span значения «all» все содержимое, отображаемое до элемента h2, отображается перед элементом h2.

Чтодля этого вам нужно CSS3 исключения или CSS3 позиционированные поплавки .К сожалению, ни один из выпущенных браузеров еще не поддерживает (и, вероятно, две спецификации будут объединены до того, как браузеры начнут добавлять поддержку).

У Adobe есть прототип реализации Regions и Exclusion на основе WebKit.можно попробовать. Если у вас IE10 Developer Preview 2, здесь есть демо позиционных плавающих элементов .