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

试试这个给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 to img

演示

于 2013-07-23T06:35:00.743 回答
0

问题在于 的宽度<p>。它占用了其父级的全宽，因此它在图像下方的新行中下降。

您可以尝试设置宽度<p>

于 2013-07-23T06:35:48.617 回答
0

只是float:left;从 p 中删除它会很好

于 2013-07-23T06:35:52.620 回答
0

解决方案

删除元素的float属性，p如下所示：demo

解释

当将元素的float属性设置为p不同于 的值时，如果可用none，p元素将扩展到最大宽度，并且不接受任何其他浮动元素重叠在其区域上。

通过使用默认值（无浮动），该p元素将允许其他浮动元素占据一个区域，并且文本将填充其他空白。

于 2013-07-23T06:43:45.507 回答