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

给定以下HTML:

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

当前回答

正因为这一点根本没有被提及，在你这种情况下通常有效的方法是:

将copyright-div放在container-div之后

您只需要以与其他容器类似的方式格式化copyright-div(相同的整体宽度、居中等)，就可以了。

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

唯一不理想的情况是当container-div声明高度为:100%时，用户需要向下滚动以查看版权。但即使如此，你仍然可以修改(例如margin-top:-20px -当你的版权元素的高度是20px)。

没有绝对定位没有表格布局没有疯狂的css，其他浏览器看起来都不一样(至少IE是这样) 简单明了的格式

旁白:我知道OP要求的解决方案是“……粘在“容器”div的底部…”，而不是下面的东西，但拜托，人们在这里寻找好的解决方案，这就是一个!

2013-06-13 08:28:48

其他回答

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

正因为这一点根本没有被提及，在你这种情况下通常有效的方法是:

将copyright-div放在container-div之后

您只需要以与其他容器类似的方式格式化copyright-div(相同的整体宽度、居中等)，就可以了。

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

没有绝对定位没有表格布局没有疯狂的css，其他浏览器看起来都不一样(至少IE是这样) 简单明了的格式

旁白:我知道OP要求的解决方案是“……粘在“容器”div的底部…”，而不是下面的东西，但拜托，人们在这里寻找好的解决方案，这就是一个!

2013-06-13 08:28:48

可能不是。

指定位置:相对于#容器，然后position:绝对;底部:0;#版权。

2009-02-08 17:13:26

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

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

灵活的方法!

在受支持的浏览器中，您可以使用以下方法:

例子

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; flex-direction:列; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; margin-top:汽车; } < div class = "父" > <div class="child">对齐到底部</div> < / div >

上面的解决方案可能更灵活，但是，这里有一个替代方案:

例子

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; align-self: flex-end; ｝ < div class = "父" > <div class="child">对齐到底部</div> < / div >

作为旁注，您可能希望添加供应商前缀以获得额外支持。

2015-01-07 05:04:24

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

推荐文章

最新文章

标签