jquery - DIV 内的右对齐按钮

Question

作为后端开发人员，我更自在，但我遇到了一个让我难过的样式问题。我已经发布了我的场景示例 here .

我正在创建一个 div，它根据单击按钮来显示/隐藏以显示特定元素的详细信息。该部分工作正常，但布局不尽如人意。

这是基本布局:

<div id="signaturePopup">
    <label id="signatureTitle">View Signature</label>
    <div id="signatureImage">
        <!--Contains img-->
    </div>
    <div id="signatureFooter">
        <div id="signatureStatus">
            <!-- Contains another img -->
        </div>
        <label id="signatureUserDetails">Added via JS</label>
        <!-- This is the problematic control-->
        <input id="closeSignature" type="button" value="Close" />
    </div>
</div>

随附的 CSS:

#signatureTitle {
    text-transform: uppercase;
    font-size: 16px;
}
#signatureFooter {
    bottom: 0;
    position: absolute;
}
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input {
    display: inline;
}
#signatureFooter > input {
    right: 0;
    align: 
}
#signatureImage > img {
    height: 90%;
    width: 90%;
    border: grey 1px solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我希望 div signatureFooter 中的所有内容都固定到底部，这与我现有的 CSS 配合得很好。但是，在该 div 内部，我希望将 closeSignature 固定在右侧。我试过使用 position 属性，比如给它 absolute 但这会将它推到包含 div signaturePopup 之外。我错过了什么？我假设这很容易，但是，正如我之前提到的，CSS 不是我的强项。也欢迎任何关于更简单/更好的整体布局的建议。

我正在使用 jQuery 动态添加 img 控件，如果有任何可能性的话。

这question乍一看似乎有些相似，但我不认为我正在处理任何太大的 div。

编辑
我原来省略的两个细节是

1. 我希望 signatureStatus 和 signatureUserDetails 控件保持左对齐。我只想将 closeSignature 固定在右边。
2. signatureFooter 需要保持在 signatureImage 下面，一些初始答案有重叠。

Answer 1

将父div的宽度设置为100%。这样你就可以将关闭按钮向右浮动。

#signatureFooter > input {
float:right;
}

#signatureFooter {
    bottom: 0;
    position: absolute;
    width:100%;

JSFiddle