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过大的问题。

修改
我最初省略的两个细节是

我希望signatureStatus和signatureUserDetails控件保持左对齐。我只想将closeSignature固定在右边。
signatureFooter需要保持低于signatureImage，一些初步答案会让它们重叠。

Answer 1

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

#signatureFooter > input {
float:right;
}

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

JSFiddle

Answer 2

尝试浮动：右侧css属性将关闭签名固定到右侧。

Answer 3

您知道，CSS在继承方面存在一些奇怪的问题，尤其是在position属性周围。给signaturePopup div一个相对位置，然后尝试使用定位。

这是一个小提琴，我认为你做了什么：http://jsfiddle.net/k9HxW/

另外，请注意我们通常会尝试不将样式放到CSS中的ID中，而是尝试将它们分配给类：

.signaturePopup{
    position: relative;
}

Answer 4

如果您使用position: relative;定位元素，则需要提供父元素absolute。

的CSS：

#signaturePopup {
    position: relative;
}

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

最后，小提琴：Demo

在DIV内右对齐按钮

4 个答案: