CSS图像父P标签高度保持为零[关闭]答案

【问题标题】：CSS Image parent P tag height remains zero [closed]CSS图像父P标签高度保持为零[关闭]
【发布时间】：2014-12-02 23:05:42
【问题描述】：

我有一个 CSS 问题

CSS

img[align="left"] {
display: block;
float: left;
}

HTML

<p>
 <img class="alignleft wp-image-48 size-thumbnail" src="http://url.com/en/wp-content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
 <img class="alignleft size-thumbnail wp-image-50" src="http://url.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
 <img class="alignleft size-thumbnail wp-image-49" src="http://url.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">

请查看此网址http://goo.gl/R0CgpR

页面中间单行排列有 3 张图片。

父 P 标签高度保持为零。所以下一段与图像对齐。所以我必须手动在接下来的 5 行上加一个点，以使下一段出现在图像的正下方。

这是我可以通过 CSS 解决的问题吗？而不是使用点？

【问题讨论】：

由于您在p 标签内使用float left 到您的图像，您需要清除p 标签的after 伪上的float。或者在 p 之后使用 clear-fix div。这将解决问题
@Benjamin - 我试过 p:after clear:both .，还是一样

标签： html css css-selectors

【解决方案1】：

您只需将 overflow:auto 添加到包含图像的<p> 并删除所有<p>.</p>

<p style="text-align: center; overflow:auto">
     <img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp-     content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
     <img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
     <img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>

【讨论】：

哇！它有效:) 非常感谢。

【解决方案2】：

尝试将overflow: hidden; 添加到您的p 元素样式中

<p style="text-align: center; overflow:hidden">
     <img class="alignleft wp-image-48 size-thumbnail" src="http://poqueira.com/en/wp-     content/uploads/2013/08/jamones-secando-150x150.jpg" alt="jamones-secando" width="150" height="150">
     <img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg" alt="queso_curado" width="150" height="120">
     <img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg" alt="embutidos" width="150" height="150">
</p>

【讨论】：

谢谢@benjamin .，这也有效。
不客气，我很乐意为您提供帮助。:)