在DIV内部右对齐按钮

Question

我更喜欢作为后端开发人员，但我有一个样式问题让我感到困惑。我已经发布了一个我的情况的示例，在这里。

我正在创建一个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;
}

我希望将在 signatureFooter div 中的所有内容固定在底部，我的现有 CSS 已经成功实现了这一点。但是，在该 div 中，我想要closeSignature 保持右对齐。我尝试过调整position属性，比如将其设置为absolute，但这会使它移动到包含 signaturePopup 的 div 外部。我错过了什么？我认为这应该很简单，但正如我之前提到的，CSS 不是我的强项。欢迎提出更易用和更好的整体布局方案。

如果需要，我使用 jQuery 动态添加 img 控件。

这个问题 看起来与此类似，但我认为我没有处理任何太大的 div。

编辑
我最初省略了两个细节：

1. 我希望 signatureStatus 和 signatureUserDetails 控件保持左对齐。 我只想 closeSignature 右对齐。
2. signatureFooter 需要位于 signatureImage 下面，因为一些初始答案使它们重叠。

- Sven Grosen

Answer 1

将父级div的宽度设置为100％。这样，您可以将关闭按钮向右浮动。

#signatureFooter > input {
float:right;
}

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

JSFiddle

- Prem Anand

---

我想您的意思是“正确”，而不是“左边”（这是您在fiddle中的内容）。 - Sven Grosen

否则，你的答案正是我在寻找的。 - Sven Grosen

Answer 2

尝试使用float：right CSS属性将关闭签名固定在右侧。

- haseebahmad

---

是的，它确实可以解决问题。即使这不是很详细和完美的答案，但它确切地回答了问题，告诉他如何解决问题。 - Dan

Answer 3

你需要知道的是，CSS在继承方面存在一些奇怪的问题，特别是与position属性有关。给signaturePopup div一个relative的位置，然后尝试调整位置。

这里有一个我认为可以实现你想要效果的代码片段：http://jsfiddle.net/k9HxW/

另外，请注意我们通常不会将样式放在CSS中的ID上，而是尝试将它们赋予类:

.signaturePopup{
    position: relative;
}

- Robert Hickman

---

感谢您关于ID与类的说明。我对选择器很熟悉，但从未考虑过是否有“最佳实践”可供使用。 - Sven Grosen

据我所知，ID是保留用于HTML中，JavaScript稍后将以非样式相关的方式操作该元素。还应注意，CSS为不同类型的选择器（例如标记名称、类或ID）赋予不同的优先级。请查看此线程：https://dev59.com/Em855IYBdhLWcg3w7pCg - Robert Hickman

请看我的更新，我只想要按钮右对齐，其他内容应该保持左对齐。 - Sven Grosen

@ledbutter 我有点困惑。您希望样式与原始的fiddle匹配，只是希望关闭按钮位于页面的右侧？如果这是您想要的，请尝试使用此链接：http://jsfiddle.net/44s66/ - Robert Hickman

Answer 4

如果您正在使用绝对定位元素，则需要为父元素添加position: relative;

CSS：

#signaturePopup {
    position: relative;
}

#signatureFooter {
    bottom: 0;
    right: 0;
    position: absolute;
    background: #f7f7f7;
}

最后，一个小例子：演示。

- Josh Powell