给定以下HTML:

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

我想把#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>

其他回答

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

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

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

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

显示:w3schools.com

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

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

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

#{容器 显示:网格; Grid-template-rows: 1fr auto; 高度:10眼动;/*或100%或任何*/ } < div id = "容器" > 这是随机内容。 < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

也许这对某些人有帮助:你可以总是把一个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>