CSS и javascript текстовое и графическое позиционирование

Question

У меня большой текст. Я сделал 3 столбца со следующим CSS:

.columns {
-webkit-column-count: 3;
text-align: justify;
}

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

---

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

---

Редактировать 2: Я решил это с помощью плагина jquery колонизатора. Мне пришлось добавить 3-5 строк кода для плагина. Мне это нужно для iPad, где я расположил текст и изображение, как я упоминал ранее. Я думаю, что это самый простой способ сделать эту работу.

Если вам нужно решение, напишите мне.

@ flynfish, пожалуйста, отправьте это как ответ, чтобы я мог принять это.

Answer 1

Я не уверен, что это возможно.Браузер определяет, где разбить содержимое, и с помощью CSS невозможно вставить что-либо в этих точках.Самая близкая вещь, которую я смог придумать, использует свойство column-break-before: свойство (-webkit-column-break-before, -moz-column-break-before, column-break-before).

Например:

CSS :

div#multicolumnElement {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.special {
    -webkit-column-break-before:always;
    -moz-column-break-before:always;
    column-break-before:always;
}

HTML :

<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus 
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem! 
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis 
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa. 
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum 
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim 
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum 
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula. 
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum 
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi 
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus 
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed 
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper 
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis 
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi. 
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien 
orci at nunc. </p>
</div>

В результате получается четыре столбцатекста с изображением вверху второго столбца, однако, в зависимости от объема текста и доступного пространства, возможно, что это не всегда получается так, как вы хотите.

Я бы связался спример jsFiddle, но, похоже, он не работает в банкомате.