需要css float的帮助

时间:2012-12-27 10:00:38

标签: html css

当段落和img浮动时,为什么只有第一行的段落出现在左边,而所有其他行出现在图像下面?这里是代码..

    <!DOCTYPE html>
   <html>
    <head>
   <style>
    img,p 
   {
    float:left;
   }
  </style>
  </head>

<body>
 <img src="logocss.gif" width="95" height="84" />
 <p>
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.

 </p>

但是当只有img浮动时,一切都很顺利,即所有文字都出现在左边

1 个答案:

答案 0 :(得分:2)

EXAMPLE

试试这段代码:

<img src="logocss.gif" width="95" height="84" />
 <p style="width:300px;">
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.

 </p>​

您的代码不起作用,因为元素p没有宽度

如果浮动元素没有预定义的宽度,则无论浮动是什么,它都将占用所需和可用的水平空间。注意:当未定义宽度时,某些浏览器会尝试在浮动元素旁边放置元素 - 通常只为非浮动元素提供少量空间。所以你应该总是在浮动元素上定义宽度。