CSS和javascript文本和圖像定位

Question

我有一個大文本。我用以下CSS製作了3列：

.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的例子，但它似乎是關閉ATM。