html - 将 div 定位到带有 overflow hidden 的可见容器底部

Question

我有一个包含图像的 div。这个想法是用户将能够按下一个按钮并且 div 扩展到特定高度。所以我所做的是将容器的高度设置为 200px，而图像的高度为 400px。我想在容器的右下角添加一个小按钮。

问题是按钮出现在图像下方。

所以我的问题是，如何让按钮 div 粘在它所在容器的底部？

.visual {
    padding: 0;
    background: #EEEEEE;
    height: 200px;
    overflow: hidden;
}

.pull-down-button {
    float:right;
}

.visual img {width: 100%}

<div class="visual">
    <img src="http://placehold.it/800x400" />
    <div class="pull-down-button">some text</div>
</div>

这是一个 fiddle : http://jsfiddle.net/n3zkov64/4/

Answer 1

您需要在父 div (.visual) 上设置 position:relative，然后移除子 div 上的 float 并将子 div (.pull-down-button) 上的位置从相对更改为绝对。另请注意，您需要为正确的属性指定单位:

.visual {
    padding: 0;
    background: #EEEEEE;
    height: 200px;
    overflow: hidden;
    position:relative;
}
.pull-down-button {
    position:absolute;
    bottom:0;
    right:10px;
}
.visual img {
    width: 100%
}

jsFiddle example