将div定位到不同div的底部，而不使用Absolute

Question

我在另一个div中有一个div。内部div的边距为0，自动集中它。但是，我不能让它浮动到底部而不是绝对的。无论如何将相对div浮动到普通div的底部？

Answer 1

不使用position: absolute，你必须垂直对齐它。

你可以使用vertical-align: bottom，根据the docs：

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式。

因此，要么将外部div设置为内联元素，要么将其设置为table-cell：

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Answer 2

现在你可以简单地使用display: flex来解决所有这些对齐问题。

在您的情况下，您可以简单地使父项为flex，flex-direction column（默认为行）和justify-content: flex-end。这种方法的优点是，如果父项中有多个项目，它也可以使用。

如果你有多个并希望它们从父级的开头到结尾都是对齐的，你可以将justify-content更改为另一个属性，例如space-between或space-evenly。

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

Answer 3

将此样式添加到内部div。

position: relative;
top: 100%;
transform: translateY(-100%);

Answer 4

除非你的内容是静态高度，否则我发现的唯一方法是使用jquery这样做：

$(document).ready(function(){
  inner_height = $('#inner-div').height();
  outer_height = $('#outer-div').height();
  margin_calc = (outer_height - inner_height)
  $('#inner-div').css('margin-top', (margin_calc+'px'));
});

如果另一列的高度较大，这将适用于contains-div中的column-div。

令人难以置信的是，这个简单的事情不是通过css-property（即“float：bottom”）“内置”，而是不会以绝对值等来破坏其他所有内容。

Answer 5

您可以通过将最高值设置为100％来完成此操作。

Html

<div class="outer">
<div class="inner"></div>
</div>

CSS

.outer {height:400px;width:400px;background:#eaeaea;}
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;}

看看这个小提琴：http://jsfiddle.net/62wqufgk/