WordPress 5.0升级后图像下的文本丢失

时间:2018-12-07 作者:facechomp

证言的正下方是文字<p>Tony (Property Manager)</p>, 但它与紧随其后的WordPress 5.0图库重叠。我不认为这是一个浮动问题。

此处:http://www.sunnyexteriors.ca/tony-property-manager-soffits/

2 个回复
最合适的回答,由SO网友:Clinton 整理而成

有趣的问题。。。我在Chrome中进入页面,使用开发工具(ctrl+shift+I)或右键单击元素并选择Inspect。

图像显示在Flexbox中,看起来Flexbox和其上方的块之间存在冲突。有很多方法可以解决这个问题,第一种也是最简单的,但最有可能的错误解决方法是在包含Tony名字的段落后换行。然而,这并不是一个好的解决方案,它只是增加了空间,隐藏了问题。

Fix by adding a break - not the best way

我还注意到Flexbox中的图像向上偏移了1.5em。进一步检查表明,图像上有一种样式:

.entry-content img {
    margin: 0 0 1.5em 0;
}
这会在1.5em的图像上放置一个下边距,然后图像会在应用于下边距的1.5em处落在FlexBox之外。

如果将此边距设置为0,则可以解决问题。

.entry-content img {
    margin: 0 0 0 0;
}

CSS Fix - better way

我不知道为什么这只会出现在Wordpress 5.0中,并期待其他成员的建议。但是,我确实认为应用于图像的边距以及100%的高度设置是不正确的,应该删除底部边距或将其设置为0。

SO网友:RiddleMeThis

您的多媒体资料已设置为显示:flex,并且图像正在容器外部运行。一个快速修复方法是添加溢出:隐藏到容器中。

.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    overflow: hidden;
}
问题的真正原因是,库中的图像设置为高度:100%,但底部的边距为1.5em,这会导致图像溢出容器。这样你就可以像这样删除你的图库中图像的边距。

.wp-block-gallery .blocks-gallery-item img {
    margin-bottom: 0 !important;
}
使用在您的设置中效果最好的任何解决方案。

相关推荐

Responsive Wordpress Gallery

I have been trying to make my Wordpress Gallery responsive with the help from another post:Making WordPress Gallery (.gallery-item) Responsive?I would also like the original 5-column gallery to display three columns on a tablet. I have used the following