html - HTML 强制 div 出现在 div 的底部

Question

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

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

PS 1：我需要position:absolute在第一个 div 中使用。我知道如果我删除它，问题似乎已经解决，但我正在寻找解决方法。

PS 2：我使用实心边框来查看发生了什么。

Answer 1

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

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

    }

否则将您的 div2 放入 div1 并将其定位bottom:0;为float:right;

Answer 2

如果你把第二个div放在第一个里面呢？毕竟，divs 只是容器——重要的是按钮要放在图片下方。

Answer 3

如前所述，将提交按钮移到#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，这需要更多的工作......