我如何让一个div浮动到其容器的底部?

我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。

我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。

我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。

当前回答

我知道这些东西很旧了，但我最近遇到了这个问题。

使用绝对位置跳水的建议是非常愚蠢的，因为整个浮动的东西失去了绝对位置。

现在，我没有找到一个通用的解决方案，但在很多情况下，人们使用浮动div只是为了在一行中显示一些东西，比如一系列的span元素。你不能垂直对齐。

为了达到类似的效果，你可以这样做:不让div浮动，但设置它的display属性为inline-block。然后你可以按照自己的喜好垂直排列。你只需要设置父div属性vertical-align为顶部，底部，中间或基线

我希望这能帮助到一些人

其他回答

设置父div为position: relative，然后内部div为…

position: absolute; 
bottom: 0;

.．.就这样了。

如果你需要相对对齐和DIV仍然不能给你你想要的，只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答，因为DIV应该取代表，但这是我最近对一个图像标题所做的，到目前为止它工作得完美无缺。

我只需要做一个表格。

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

而CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

看看它的实际应用: http://jsfiddle.net/mLphM/1/

这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

要将任何元素放在其容器的底部，只需使用以下命令:

div {
    position: absolute;
    bottom: 0px;
}

推荐文章