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

Question

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

Answer 1

不使用position: absolute,你必须垂直对齐它.

vertical-align: bottom根据文档,您可以使用哪个:

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（默认为row）和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%);