将一个div对齐到底部

Question

将一个div对齐到底部

4

我有一个div，我想将其对齐到页面底部。为此，我使用了以下代码 -

<div style="position:fixed;bottom:0;overflow:auto;word-wrap:break-word;display:block" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
</div>

这段代码将div对齐到底部，但是它没有包裹div内的文字。

- user2851669

使用ng-view，以便内容加载到div内部。 - Jagadeesh

try white-space: nowrap; - odedta

你的代码似乎缺少position: fixed或position: absolute，否则很难看出你正在尝试做什么。所以问题是与底部对齐还是div内文本包裹有关，还是两者都有呢？ - Marc Audet

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pralhad Narsinh Sonar · Answer 1

这里是Fiddle演示

你的CSS缺少position:absolute;。

最好避免使用内联CSS，而是将类与父级div关联，然后将CSS应用于它。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.footer-div{
    bottom:0;
    overflow:auto;
    word-wrap:break-word;
    display:block;
    position: absolute;
}
</style>
</head>
<body>
<div class="footer-div" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
</div>
</body>
</html>