Question

我希望文字在图片周围流动。在 stackoverflow 上，我找到了两个不同的答案，这两个答案在fiddly（？）中完美运行：

BLOCK - 与＆＃34; clear：both＆＃34; - 按预期工作，但文本和图像之间没有填充 - 丑陋，IMO
媒体很好地填充，但它没有流动

当我在 stackoverflow 处执行代码片段时，这两个示例看起来与现实世界（Firefox和Chrome）不同。该片段位于WoodLoon.com/t3.html（link）

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

＆＃13;

		<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>

＆＃13;

第一次使用你的fiddly（？）。与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>

图像周围的文字流 - 浮动＆amp;媒体＆amp;？

1 个答案: