如何在左对齐的新行上显示图像后的文本，而不是环绕图像？

Question

这是我的代码：

<P>
<div><img style="border: 0pt none; float: left; padding-right: 10px; padding-bottom: 10px;" src="Image.jpeg" alt="Image" width="150" height="150" />This is text wrapped around Image</div>
</P>
<P>
<div>
<h2 align="left">This text should left align</h2>
</div>
</P>

我想在新行中显示 "This text should left align" 左侧对齐

我使用了 Div 和 P 标签，如果还有别的。

Answer 1

您的 HTML 需要一些工作 - 您不能在 p 中包含 h2。但是，如果我理解正确的话，你想要这样的东西：

<div>
    <img style="float:left;padding-right:10px;padding-bottom:10px;" 
         src="Image.jpeg" alt="Image" width="150" height="150" />
    This is text wrapped around Image
</div>

<h2 style="clear:left;">This text should left align</h2>

https://jsfiddle.net/g08hycaf/

Answer 2

清楚：两者都应该完成工作

<div>
<div><img style="border: 0pt none; float: left; padding-right: 10px; padding-bottom: 10px;" src="Image.jpeg" alt="Image" width="150" height="150" />This is text wrapped around Image</div>
</div>
<div style="clear: both">
<h2 align="left">This text should left align</h2>
</div>

如何在左对齐的新行上显示图像后的文本，而不是环绕图像？

How to display Text after an Image on a new line left aligned, instead of wrapping around the image?

html

css

css-float

text-align