文字を回り込むように表示したい

お世話になっております。
初心者の質問失礼します。

css
1.right{
2	float: right;
3}
4.left{
5	float: left;
6}

で

html
1<div style="width: 400px; text-align: left;" class="left" >
2説明文ズラズラと……
3</div>
4
5<div class="right">
6<br>
7<img src="img/hogehoge.png" width="350" height="240" alt=""/>
8</div>

とやって

説明文ズラズラと…………
………………………………………………… 「
…………………………………………………　　　ホゲホゲ
…………………………………………………　　　　　　　　」

とやっていたのですが
説明文が長くなってきたので

説明文ズラズラと…………
………………………………………………… 「
…………………………………………………　　　ホゲホゲ
…………………………………………………　　　　　　　　」
…………………………………………………………………………………………
…………………………………………………………………………………………

とするのは上記cssの

css
1.right{
2	float: right;
3}

などでは出来ないので
どのように実装するのが一般的でしょうか？

本当に初心者の質問で申し訳ないのですが
ご助力頂けますようお願い申し上げます。

行動規範の内容に同意します

回答2件

こういうのは、雑誌ぽい表示でやりたくなりますよね。
下記の感じでどうでしょうか。

html
1<div class="imageContainer imageRight">
2<img src="img/hogehoge.png" width="350" height="240" alt=""/>
3説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
4</div>

css
1.imageContainer:after {
2  clear: both;
3  content: "";
4  display: block;
5}
6.imageContainer { display: inline-block;}
7
8/* Hides from IE-mac */
9* html .imageContainer { height: 1%;}
10
11.imageContainer { display: block;}
12
13.imageRight > img { float: right;}

画像とテキストを、同ブロック内に入れました。
どうしても、文章とテキストで、ブロックを分けると、質問者さんの意図の表示は難しくなります。
（方法はいくらでもあるとは思いますが）
なので、この方法が一番簡単かなと。
ちなみに、.imageContainerには、有名なclearfixのCSSを適用させてます。

投稿2018/02/06 04:37

miyabi_pudding

総合スコア9528

ベストアンサー

こういう感じでは？
（基本的に右寄せする方を先に書く）

CSS
1/* とりあえず全体の幅を調整 */
2.wrap{
3  width:600px;
4}
5.right{
6 float: right;
7}

HTML
1<div class="wrap">
2<div class="right">
3<img src="img/hogehoge.png" width="350" height="240" alt=""/>
4</div>
5<div style="width: 400px; text-align: left;word-break:break-all">
6説明文ズラズラと………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
7</div>
8</div>