0 
<style>
.floatright { float: right;margin: 0 0 10px 10px; }
p {float: left;}
</style>
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<img class="floatright" src="computer.png" alt="" width="60" height="60">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

質問：

なぜ段落: <p>Lorem ipsum...</p>imgs と同じ行に表示されないのですか? imgs の下の行から開始します。

4

6 に答える 6

0

問題は幅です<p>。画像の下の新しい行にドロップされているため、親の全幅を使用しています。

の幅を試して設定できます<p>

于 2013-07-23T06:35:48.617 に答える
0

pから削除するだけfloat:left;でいいでしょう

于 2013-07-23T06:35:52.620 に答える
0

これを試して、width:--%;Pタグを付けるか、margin:0;

http://jsfiddle.net/AZctd/1/

.floatright { 
      float: right; 
      margin: 0 0 10px 10px; 
     border:1px solid red;
       }

p {float:left; 
    width:60%;; 
    margin:0;}
于 2013-07-23T06:33:41.050 に答える
0

アップデート

JS フィドルを確認する

ここに画像の説明を入力

これがあなたが望むものであることを願っています..

http://jsfiddle.net/arunberti/zzBb4/2/

CSS

 .floatright { float: right;
      margin: 0 0 10px 10px; }
    p {float: left;
        width:65%;
         text-align: justify;
    }
于 2013-07-23T06:34:58.467 に答える
0

p の幅を定義する必要があります。

それ以外の場合は、次のように html を定義する必要があります....

<p><img src="" /><img src="" /><img src="" />your text here</p>

次に float: right を img に与えます

デモ

于 2013-07-23T06:35:00.743 に答える