[英]Cannot force a line break after a row of images
在博客文章中(对于Cooking Stackexchange博客 ,所以只有几个插件的普通WordPress实例),我插入了三个图像,对齐到“左”,并希望它们占用自己的行。 我希望文本从它们下面开始。
无论我尝试什么,(我手动插入了你在代码中看到的<p>
, <br>
和<div>
标签)文本都与图像在同一行上开始,看起来很糟糕。 我能做什么?
产生上面屏幕截图的代码:
<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit
less than the other methods – so it can provide a little insurance if
you’re afraid of burnt cookies. </p>
<div><img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /><img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><br/></div>
<p>I’m going to stick with parchment paper, because it offers one big
advantage over the bare sheet and silicone mat:
你需要在<img />
之后清除浮动以强制<div />
来正确计算高度。
为此,添加style="overflow:hidden;
到开始<div>
标记,因此更新后的代码如下所示:
<p> I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods – so it can provide a little insurance if you're afraid of burnt cookies. </p>
<div style="overflow:hidden;">
<img class="wp-image-870 alignleft" style="margin-left: 2px; margin-right: 2px;" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" />
<img class="wp-image-869 alignleft" style="margin-left: 2px; margin-right: 2px;" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" />
<img class="alignleft size-medium wp-image-868" style="margin-left: 2px; margin-right: 2px;" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" />
</div>
<p>I'm going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>
您可以在此处找到有关浮子的更多详细信息: http : //css-tricks.com/all-about-floats/
添加clear:both
该部门的CSS样式。
另外,为什么不为该分区中的图像添加一个类,那么你不必使用style=""
内联样式,如果你决定将来需要3px的余量,你只需在样式表中更改它而不是必须回顾之前的所有帖子。
试试这个 - 不需要清除,图像也会出现水平对齐:
<p>I expected a bigger difference between these 3 methods. The silicone mat browned the cookies a bit less than the other methods – so it can provide a little insurance if you’re afraid of burnt cookies.</p>
<p style="text-align: center;"><img class="wp-image-870 alignleft" title="baking sheet cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3784-225x300.jpg" alt="Cookies baked on baking sheet" width="225" height="300" /><img class="size-medium wp-image-868 alignright" title="parchment paper cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3790-225x300.jpg" alt="" width="225" height="300" /><img class="wp-image-869" title="silpat cookies" src="http://cooking.blogoverflow.com/files/2012/08/IMG_3787-225x300.jpg" alt="" width="225" height="300" /></p>
<p>I’m going to stick with parchment paper, because it offers one big advantage over the bare sheet and silicone mat:</p>
GIV p
一个min-width
,以避免非常短的孤儿:
p {
min-width: 10em;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.