CSS 按钮底部对齐答案

【问题标题】：CSS button align bottomCSS 按钮底部对齐
【发布时间】：2017-01-29 16:57:27
【问题描述】：

我正在使用Bootstrap 开发webapp 手机。我有一个带有text 和button 的屏幕。当text is small button 应该在页面底部，但是当text is large button 应该在文本末尾之后。

如何使用CSS 做到这一点？

HTML 代码：

<div id="message" class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="subject"></h1>
                    <p class="content"></p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="elapsed"/>
                </div>
            </div>
            <div class="row" style="position: absolute; bottom: 10px; width: 100%;">
                <div class="col-xs-12">
                    <button id="delete" class="btn btn-lg btn-block btn-danger">
                        Excluir
                    </button>
                </div>
            </div>
    </div>

【问题讨论】：

你试过什么？
请提供 HTML 和 CSS
你想要 2 种不同的东西，需要 2 种不同的按钮样式。您希望按钮保持相对于文本（如果文本“大”）而不保持相对于文本（如果文本很小）。如果没有 jq javascript 等，这是不可能的（你也应该发布你尝试过的内容。这不是一个代码制作网站）

标签： css twitter-bootstrap-3 vertical-alignment

【解决方案1】：

使用 CSS？这是不可能的。然而，它可以用 jQuery 完成（假设你有访问权限）。

您的示例中没有包含任何 text 作为参考，因此我在按钮上方直接添加了一些 col-xs-12 类。希望您在将文本放在不同的 DOM 位置时可能遇到的任何问题都可以相当简单地解决。

此外，“当文本很小时”是任意的，所以我在示例中使用了 30px 的大小。随意修改。

使用 jQuery，可以根据文本的字体大小修改文本/按钮的位置，方法如下：

if ($(".text").css('font-size') >= '30px') {
    $(".text").css("float", "left");
}

我已经创建了这个here 的小提琴。当.text 的字体大小小于30px 时，按钮将位于文本下方。当.text 的font-size 为30px 或更大时，按钮将位于右侧。

希望这会有所帮助！

【讨论】：