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

Posted 2023-03-06

【中文标题】CSS图像父P标签高度保持为零[关闭]

【英文标题】：CSS Image parent P tag height remains zero [closed]

【发布时间】：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"   >
 <img class="alignleft size-thumbnail wp-image-50" src="http://url.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg"   >
 <img class="alignleft size-thumbnail wp-image-49" src="http://url.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg"   >

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

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

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

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

【问题讨论】：

由于您在p 标签内使用float left 到您的图像，您需要清除p 标签的after 伪上的float。或者在 p 之后使用 clear-fix div。这将解决问题

@Benjamin - 我试过 p:after clear:both .，还是一样

【参考方案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"   >
     <img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg"   >
     <img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg"   >
</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"   >
     <img class="alignleft size-thumbnail wp-image-50" src="http://poqueira.com/en/wp-content/uploads/2013/08/queso_curado-150x120.jpg"   >
     <img class="alignleft size-thumbnail wp-image-49" src="http://poqueira.com/en/wp-content/uploads/2013/08/embutidos-150x150.jpg"   >
</p>

【讨论】：

谢谢@benjamin .，这也有效。

不客气，我很乐意为您提供帮助。:)