使用float时出现文本对齐问题

Question

<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下面的一行开始。

Answer 1

试试这个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;}

Answer 2

<强>更新

检查JS小提琴

我希望这就是你想要的......

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

CSS

 .floatright { float: right;
      margin: 0 0 10px 10px; }
    p {float: left;
        width:65%;
         text-align: justify;
    }

Answer 3

您需要定义p的宽度。

否则，你需要像这样定义你的html ....

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

然后给浮动：对img

demo

Answer 4

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

您可以尝试设置<p>

的宽度

Answer 5

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

Answer 6

解决方案

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

<强>解释

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

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