将 div 定位到不同 div 的底部，而不使用 Absolute [关闭]

Posted 2023-03-06

【中文标题】将 div 定位到不同 div 的底部，而不使用 Absolute [关闭]

【英文标题】：Position div to bottom of a different div, without using Absolute [closed]

【发布时间】：2014-11-25 07:40:19

【问题描述】：

我在另一个 div 中有一个 div。内部 div 的边距为 0，自动集中它。但是，如果不使其成为绝对值，我就无法让它浮到底部。反正有没有让相对 div 浮动到普通 div 的底部？

【问题讨论】：

一些代码可以让我们更好地理解这个问题

使用position:absolute有什么问题？

我在同一个 div 中有文本。并且为了响应性，当屏幕很小时，图像会覆盖文本。

我们可以看看小提琴吗？

它可以工作，但是根据我有多少文本，我需要更改 translateY % 有什么办法可以解决这个问题？

【参考方案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>

【讨论】：

如何让内部居中，居中对齐？

text-align: center 在外部，或margin: 0 auto 在内部。

@user3506938 - 如果你说的是垂直居中，那就是vertical-align: middle;

但这会将父 div 中的所有内容都对齐到底部。如果您只希望内部 div 位于底部，而其他所有内容都与顶部对齐，该怎么办？

现在你可以使用 Flexbox 来解决这个问题：***.com/a/49068854/5993042

【参考方案2】：

您可以通过将最高值设置为 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/

【讨论】：

这似乎不起作用。图像太低，超出 div

用户希望内部 div 与外部 div 的底部对齐。提供的小提琴（看一下）将“内部”（不再是“内部”）低于“外部”之一。

【参考方案3】：

将此样式添加到内部 div。

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

【讨论】：

有人投了反对票，但没有说明原因，这会很有帮助。我认为这行得通，但它有缺点吗？我不记得了。

我似乎找不到缺点，这可能就是为什么我将其发布为三行解决方案。这是一个 jsfiddle，显示无论文档位置如何，div 都保持在其父 div 的底部，而不会更改定位类型。 jsfiddle.net/Zmgaddo/1qgb5cu4

【参考方案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'));
);

如果另一列的高度更大，这将适用于包含 div 中的列 div。

令人难以置信的是，这个简单的东西不是通过 css 属性“内置”的（即“float:bottom”），它不会用绝对值等破坏其他一切。

【讨论】：

"float" 没有意义。 float 的目的是将元素移动到同一行上其他元素的左侧或右侧。在 CSS 没有替代方法的情况下，它的使用被大量滥用。

【参考方案5】：

现在您可以简单地使用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>

【讨论】：

除非你想完全支持IE。这在 IE 10 中不起作用

你是对的。我可能是一个幸运的开发者，不必为 IE11 提供支持，但 IE10 有 0.12% 的用法。取决于您的用例 ofc。 (caniuse.com/usage-table)

这个答案立即对我有用。我想将元素放置在离底部 40px 的位置，所以我只添加了一个边距。

【参考方案6】：

看到这个，

.container 
  display: flex;
  flex-direction: column;
  justify-content: space-between;

CSS positioning at the bottom without absolute positioning