我如何能定位我的div在其容器的底部?

给定以下HTML:

我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?

当前回答

下面是一种方法，目的是使具有已知高度和宽度(至少大约)的元素浮到右边并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将它放置在任何其他角落。

我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“shadow”元素来占据导航栏的链接空间，并将其添加到容器子节点的末尾。

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

2013-08-30 05:46:55

其他回答

此外，如果有使用位置的规定:绝对;或者position:relative;，你总是可以尝试填充父div或放置margin-top:x;。在大多数情况下不是一个很好的方法，但在某些情况下可能会派上用场。

2013-05-15 14:50:38

对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。

注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。

#{容器显示:表; 宽度:100%; 身高:200 px; ｝ #{项显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >

2016-11-16 11:31:39

显示:w3schools.com

有位置的元素:绝对的;定位相对于最近的定位祖先(而不是相对于视口，像固定)。

所以你需要将父元素定位为相对或绝对元素，等等，并将所需元素定位为绝对元素，然后将bottom设置为0。

2020-02-06 13:21:25

你可以通过为顶部的内容分配可用空间来使用网格:

2021-12-03 18:44:27

也许这对某些人有帮助:你可以总是把一个div放在另一个div的外面，然后用负边距把它往上推:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

2014-04-03 08:51:59

我如何能定位我的div在其容器的底部?

推荐文章

最新文章

标签