将div定位到另一个div的底部，而不使用绝对值 [英] Position div to bottom of a different div, without using Absolute

问题描述

我在另一个div中有一个div。内部div的边距为0，自动将其居中。但是，如果不将其设为绝对值，则无法使其浮到底部。无论如何，是否使相对div浮动到普通div的底部？

I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?

推荐答案

如果不使用 position：absolute ，则必须垂直

Without using position: absolute, you'd have to vertically align it.

您可以使用 vertical-align：bottom 根据 文档 ：

You can use vertical-align: bottom which, according to the docs:

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

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

因此，可以将外部div设置为内联元素，或者设置为 table-cell ：

So, either set the outer div as an inline element, or as a 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>

这篇关于将div定位到另一个div的底部，而不使用绝对值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！