HTML force div出现在div的底部

Question

我有http://jsbin.com/AKUtEYu/1/edit。

在这里，我想在div1内部和div1下面显示一个图像，我还想在div2中显示一个提交按钮。我在这里遇到的问题是第二个div出现在第一个div的下面。

P.S 1：我需要在第一个div中使用position:absolute。我知道如果我删除它，问题似乎是固定的，但我正在寻找一种方法。

P.S 2：我用固体边框看看发生了什么。

Answer 1

如果您将第二个div放在第一个内部怎么办？毕竟，div只是容器 - 重要的是按钮放在图片下面。

Answer 2

如前所述，请在#container父块内移动提交按钮：

<div id="container">
    <img src="http://31.media.tumblr.com/tumblr_m50exyThDb1r4kc3co1_500.jpg" />

    <div id="footerSubmit">
        <input type="submit" alt="Submit" id="SubmitSelections" name="Submit">
    </div>
</div>

否则，您必须在#container上设置一个高度，在#footerSubmit上设置绝对或相对位置，这是更多的工作......

Answer 3

如果您知道absolutde元素/ div的高度，那么您可以使用它的高度来定位您的相对元素。例如，将div2 css更改为

#footerSubmit{
        position:relative;
        top:350px;
        float:right;
        border: 10px solid;
        color:red;

    }

否则将div2放在div1中并将其定位为bottom:0;和float:right;