3

在一篇博文中（对于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>
&nbsp;
<p>I’m going to stick with parchment paper, because it offers one big
advantage over the bare sheet and silicone mat:
4

4 回答 4

4

您需要在<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 &ndash; 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/

于 2012-08-08T10:58:43.463 回答
1

添加clear:both到该部门的 CSS 样式。

另外，为什么不为该分区中的图像添加一个类，那么您将不必使用style=""内联样式，如果您决定将来想要 3px 的边距，您只需在样式表中更改它，而不必返回所有以前的帖子。

于 2012-08-08T10:59:05.993 回答
1

试试这个 - 不需要清除，图像也会水平显示：

<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>
于 2012-08-08T11:01:03.180 回答
0

给p一个min-width以避免非常短的孤儿：

p {
    min-width: 10em;
}
于 2012-08-08T12:44:11.437 回答