Html 如何在图像的右侧放置一些文本，在图像的下方放置一些文本

我正在制作一个网站，我遇到了这个问题：我需要一个动态大小的图像（准确地说是25%），在它的右边有一些文本，在下面有一些文本

我知道可以使用

float:right

将文本放在图像的右侧，但这使得不可能将任何文本始终放在图像的下方

下面是一个JSFIDLE：

由于图像具有动态大小，我不能只添加大量换行符，因为不仅代码很难看，而且在任何屏幕分辨率与我不同的设备上都无法正常工作

将图像和正确的文本放在div中不会有帮助，因为div只会环绕文本，使图像通过div的边框突出

---

如果需要JavaScript，那么就这样吧，不过，我需要一个无PHP的解决方案。（不过，纯HTML/CSS会很好）

看起来您想要

div

带有

clear:both

CSS规则，有关详细信息：

img{
浮动：左；
利润率：8px；
}
.清楚{
明确：两者皆有；
}

我希望此文本位于此图像的右侧


我希望此文本位于图像下方

只需使用

清除：同时使用
清除浮动，第二个文本将位于图像下方：


img{
浮动：左；
利润率：8px；
}


我希望此文本位于此图像的右侧


我希望此文本位于图像下方
您可以使用
clear
属性指定文本应插入浮动元素之后

<p style="clear: both;">
    Lorem ipsum
</p>


乱数假文


JSFiddle:
以CSS作为第二段的目标，并使用
clear:both

例如：

HTML代码：

<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<p id="secondParagraph">
  I want this text to be under the image
</p>

我也会用CSS设置25%的宽度。最好在外部使用CSS进行所有样式设置，而不是使用HTML。更容易管理

img {
      float: left;
      margin: 8px;
    }

#secondParagraph {
      clear:both;  
    }