在底部对齐 div [重复]
Posted
技术标签:
【中文标题】在底部对齐 div [重复]【英文标题】：align a div at the bottom [duplicate] 【发布时间】：2015-09-02 12:48:19 【问题描述】：我有一个要在页面底部对齐的 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 内。
【问题讨论】：
使用ng-view，让内容加载到div里面 试试white-space: nowrap;
您的代码似乎缺少position: fixed 或position: absolute，否则，很难看出您在做什么。那么是底部对齐的问题，还是 div 内的文本换行问题，或两者兼而有之？
【参考方案1】：
这里是Fiddle Demo
您的 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>
【讨论】：
position:absolute 的问题是，如果相关的 div 之前没有 div，那么它会排在最前面。我希望 div 始终位于底部（如果我使用页脚也是同样的问题）。以上是关于在底部对齐 div [重复]的主要内容，如果未能解决你的问题，请参考以下文章