Question

我想将图片（这将是一个三角形向下）放置到白色背景的底部，但在其外面（顶部我的图像应该触及DIV的底部）。我怎么能实现这个目标？我尝试过以下但是没有效果 - 尽管调整了边距，图像仍保留在DIV内。

  </div><img src="http://placehold.it/92x45" class="triangle-outside" alt="" width="92" height="45">
</section>

CSS：

.triangle-outside {
  display: block;
  margin: 45px auto 0;
}

Answer 1

您的图片的负边距为-80px，而您的图片的填充为75px。所以你有5px的差异使它看起来像在div里面。

你可以：

将80px替换为75px
将这个丑陋的负边距更改为使用绝对/相对位置的方法
:before/:after伪元素也可以做。

你没有白色div的问题。只是身体背景是白色的，所以你认为它在里面，但事实上它在外面。 https://jsfiddle.net/oL40awap/1/

Answer 2

嗯，您可以使用多种方法来完成，但其中一种方法是使用position: absolute：

.triangle-outside {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -45px;
    margin: auto;
}

<强> jsFiddle

但您需要为父position: relative设置(section)并向其添加margin-bottom。请注意，id，section不要使用相同的ID，unique必须为after。此方法是跨浏览器，但您也可以使用before或#services2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -45px; margin: auto; background: url('http://placehold.it/92x45') no-repeat; width: 92px; height: 45px; }。

.triangle-outside

<强> jsFiddle

然后删除href。但如果您想在其上使用OnEdit，则必须使用prev方法。

我为身体设置了背景颜色以进行测试，稍后将其删除。

问题是将图像放在DIV的底部和外部

2 个答案: