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

给定以下HTML:

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

当前回答

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

其他回答

CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:

position:absolute;
bottom:0;

2013-05-20 14:14:26

显示:w3schools.com

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

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

2020-02-06 13:21:25

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

我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“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

是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。

演示这是经过测试的工作在IE>7, chrome, FF &是一个非常容易添加到您现有的布局。

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

它有效地做了浮动:底部会做的事情，甚至解释了@Rick Reilly的回答中指出的问题!

2013-10-01 07:16:53

也许这对某些人有帮助:你可以总是把一个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在其容器的底部?

推荐文章

最新文章

标签