0

テキストを折り返したい画像があります。例えば

ttttttt|image|    
ttttttt|     |
tttttttttttttt
tttttttttttttt

画像がソースコードのテキストの前にある場合、これは簡単です。ただし、次のようなテキストの後に画像を配置する必要があります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト画像

画像のサイズやテキストの幅がわかりません（レイアウトが流動的であるため）

JSを使いたくない

とても有難い

4

3 に答える 3

0

あなたはそれを2つの方法で行うことができます。

画像タグ内：

 <img src="http://www.wesleyeterry.com/apple-touch-icon-precomposed.png" align="left" vspace="4" hspace="4">

またはCSSの場合：

<style>
img {
float:left;
margin:2px;
}

http://www.wesleyeterry.com/apple-touch-icon-precomposed.png

于 2012-03-28T14:16:51.020 に答える
0

これを行う別の方法についてのメモ...

画像がソースの最初にあることに満足している限り (フローティングできるようにするため)、 display:table-caption を使用して、画像がフローティングされていない小さな画面でソースを反転できます。

大画面

img{
float:left;
}

小さな画面

.container{
display:table;
caption-side: bottom;
}

img{
float:none;
display: table-caption;
}

似たようなことをしようとしている人に役立つことを願っています。それが明らかでない場合は、メモを送ってください。コードを貼り付けます。

于 2013-02-27T15:43:48.783 に答える
0

私は自分の質問に対する解決策を持っていると思います。

ソースのテキストの後に画像を配置したい理由は、小さな画面では画像を浮かせず、コンテンツを画像の上に置きたいからです。画像が最初の場合、小さな画面では高すぎます。

私の解決策はあまりセマンティックではありませんが、それ以外に問題は見られません。おそらく別の http リクエストです。

これが私がやった方法です：

画像を 2 回追加します。まずは本文前。「alt」が空であることを確認してください。

次に、コンテンツの後に画像を再度追加します。代替テキストが適切であることを確認してください。

画像とテキストの両方を div でラップし、「display:relative」に設定します

最初の画像を右にフロートするように設定し、その可視性を非表示に設定します 2 番目の画像を position: absolute に設定し、画像の上に配置します (コンテナーの相対表示で簡単です)

フロートされた画像は、絶対配置された画像のフロートとして機能し、サイズを計算するために JS を使用する必要がないため、最大幅を使用すると画像が縮小され、テキストは引き続き正常に機能します (呼び出しなし)。 JS に戻って新しい次元を取得します)

次に、小さな画面のメディアクエリを使用して、最初の画像を「display:none」に設定し、2 番目の画像に絶対位置を適用していません。したがって、ユーザーに関する限り、コンテンツの後に画像が表示されます。

私の最初のテストではうまく機能しているように見えますが、ハックのように感じます。おそらく、フレックスボックスで何かできるかもしれませんが、それはまた別の機会にします。誰かがより良い解決策を知っているか、これが本当に悪い理由を考えられるなら、私に知らせてください!

于 2012-03-28T19:26:45.803 に答える