CSSとjavascriptのテキストと画像の位置付け

Question

大きなテキストがあります。私は次のCSSで3つの列を作った：

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

Safariで動作する必要があります。これはうまく動作します。しかし今、私は2番目の列の上部に画像を配置したいと思います。
どうすればこの結果が得られますか？

---

編集：これは、ことをやって、私のスタートだったが、私は重要なことは、どのような方法で結果を持つことであることを言いたいので、私はそれをせずに解決することができる場合には、このCSSをドロップすることができますこの。

---

編集2：jquery colonizerプラグインで解決しました。私は、プラグインに3〜5行のコードを追加しなければならなかった。私は前に言及したようにテキストとイメージを配置しているiPadのためにこれが必要です。私はこれがこの仕事をする最も簡単な方法だと思います。

解決策が必要な場合は、私に電子メールを送信してください。

@flyfish、回答として投稿していただければ幸いです。

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> 

これは第二カラムの上部に画像とテキストの4つの列を生成し、しかし、テキストの量と利用可能なスペースに応じて、これは可能ではない可能性がありますあなたが望むように常に出てくる。

私はjsFiddleの例にリンクしていましたが、ATMがダウンしているようです。