2

今のところ、私は持っています：

<img style="float:right;" src="/path/to/image.png">
<p>lorem ipsum dolor</p>

これにより、画像とその周囲のテキストが適切に設定されます。ただし、透明度を無視して、png画像の実際のコンテンツの周りにテキストを「フロー」させることは可能ですか？

これで、次のようになります。

前

私はそれをこのように見せたいです：

後

私が見る可能性：

1) Manually add breaks

動的コンテンツではほとんど不可能です。

2) Have php add breaks after a set number of characters

非常に複雑で、すべての画像に対して決定する必要があります。

3) Another way someone here knows about

誰かがこのような状況で何か経験がありますか？

前もって感謝します！

4

4 に答える 4

6

これを行うための「正しい」方法は、CSS3の形状/除外（形状-外側/内側など）です。

残念ながら、2013年4月の時点では、これらはまだ広く実装されていません。Chrome / Webkitには、カナリアビルドでテストがあります。おそらくMozillaが続くでしょう。

于 2013-04-15T19:17:23.437 に答える
4

何もハードコーディングせずに画像の周りにテキストをラップするために私が考えることができる唯一の考えられる方法は、jQueryの助けを借りることです。jQSlickWrapと呼ばれるプラグインがあります-それはあなたが探している解決策かもしれません。ただし、ブラウザに代わってHTML5のサポートが必要なため、現時点ではIEユーザーには機能しません。

于 2011-06-27T11:09:43.647 に答える
0

自動ブレークポイント検出には、非常に複雑なエッジ検出、テキストメトリック、およびフロー計算が含まれますが、これらは複雑すぎてゲインがほとんどありません。

私の頭に浮かぶ唯一の実行可能な方法は、画像をオーバーレイするいくつかのフローティングボックス（DIV）を使用して画像を手動で近似することです（HTML + CSSを使用）。

于 2011-06-27T11:15:22.863 に答える
-1

これは間違いなく可能です。テキストの行の高さとテキストを分割する場所の幅に等しい高さの空白の要素を作成する必要があります。次に、これらの要素をclear: bothCSSスタイルでテキストにフロートさせ、テキストの下にz-indexを使用して画像を完全に配置します。

于 2014-03-13T20:46:03.723 に答える