时间戳

首页 > 解决方案 > 图像无缘无故地浮出父 div

javascript - 图像无缘无故地浮出父 div

问题描述

标题可能有点不清楚，但我有一个<img>由 WordPress 短代码生成的标签：the_post_thumbnail('thumbnail');我把它放在一个父 div 中，以便在网站中给它正确的位置。

single.php 里面有这个：

<div class="newsidebar">
    <?php the_post_thumbnail('thumbnail'); ?>
</div>

HTML 输出：

htmloutputimg

CSS样式.newsidebar

.newsidebar {
    width: 30%;
    position: relative;
    left: 100%;
    transform: translateX(-100%);
    height: 500px;
    margin: 4em 0;
}

预期的输出只是这个图像位于我的.newsidebardiv 中，但实际上它无缘无故地卡在页面底部。没有填充/边距将 img 向下推，没有顶部/底部样式的绝对位置。

是否还有另一个 css 原因让我忽略了为什么它希望在站点中比预期的位置低约 1000 像素？

现场实际输出：

实际输出

我试图解决这个问题是什么？

给img：

职位，

利润，

最佳，

底部，

但唯一真正让它留在父母体内的是

.newsidebar > img {
    position: absolute;
    top:0;
    left:0;
}

这段代码的缺点是，我不想使用绝对位置，因为在newsidebar 中添加了小部件/其他元素。然后它将悬停在此图像的上方或下方。

任何 CSS/JavaScript/jQuery 解决方案都有帮助。

编辑我使用另一个名为的 WordPress 函数修复了我的问题get_the_post_thumbnail_url()，并将该 url 添加到我的 div 内的 div 的背景中.newsidebar。但我仍然很想知道为什么这<img>会影响我的网站。

标签： javascripthtmljquerycsswordpress

解决方案

推荐阅读