文字围绕图像流动 - 浮动和媒体&？

Question

我希望文字在图像周围流动。在 stackoverflow 上，我找到了两个不同的答案，这两个答案都非常适合 (?)：

• BLOCK - 带有“clear:both” - 按预期工作，但文本和图像之间没有填充 - 丑陋，IMO
• 媒体 - 填充得很好，但不流畅

当我在 stackoverflow 中执行 sn-p 时，这两个示例看起来都与现实世界中的不同（Firefox 和 Chrome）。 sn-p 位于 WoodLoon.com/t3.html (link)

有没有更好的方法结合两者的优点？

		<div class="row; ">
				<img style="height: 120px; float:left" src="http://WoodFool.com/Pictures/Ski.jpg">
				<p>IMAGE FLOAT LEFT = Experience 1 = text floats - Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>
				<p>Experience continues = text floats - Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>				
				<p style="clear:both"><strong>P has style="clear:both" -</strong> Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		</div>

		<div class="row; ">
			<div class="media; media-left">
				<span></span>
					<img style="height: 120px; float:left" src="http://WoodFool.com/Pictures/Ski.jpg">
				</div>
				<div class="media-body">
					<p class="media-heading">MEDIA BODY (MEDIA-LEFT ABOVE) Experience 2 = text floats -  Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>
					<p>Experience continues = text floats - Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>						
					<p style="clear:both"><strong>P has style="clear:both" -</strong> Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>					
				</div>
			</div>      

第一次使用您的繁琐 (?)。与 Firefox 和 Chrome 不同的结果 - here's a link（我希望这没有违反某些规则 - 这是我的第二篇文章......）

另外，我使用 Notepad++ - 我印象深刻。当我从硬盘运行时，它会立即在 Firefox 上呈现，但 Chrome 需要 23 秒。我实际上可以在 N++ 中保存文件，在 Filezilla 中传输新的 HTML 文件，然后在 23 秒内在 Chrome 中按 F5。显然这不重要，但很烦人。

Answer 1

用下面的标记替换你的第一行。

<div class="row; "><!-- image 1 -->
            <div class="media; media-left"><img style="height: 120px; float:left" src="http://WoodFool.com/Pictures/Ski.jpg"></div>
            <div class="media-body"><p><strong>IMAGE FLOAT LEFT = Experience 1 = </strong>text floats - Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>
            <p>Experience continues = text floats - Donec id elit non mi portnon mi a gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- Donec id elit non mi portnon miporta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui- </p>               
            <p style="clear:both"><strong>P has style="clear:both" -</strong> Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div></div>