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

给定以下HTML:

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

当前回答

2016-05-19 07:01:57

其他回答

虽然这里提供的答案似乎都不适用于我的特定情况，但我看到了一篇文章，它提供了一个简洁的解决方案:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

我发现它非常有用，适用于移动显示的响应式设计，而不必重新排序网站的所有html代码，将主体本身设置为一个表。

请注意，只有第一个表脚-组或表头-组会被这样呈现:如果有多个表脚-组，其他的将被这样呈现。

2014-08-19 00:37:09

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

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

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

2021-12-03 18:44:27

CSS网格

由于CSS Grid的使用正在增加，我想建议align-self到网格容器内的元素。

Align-self可以包含任何值:end, self-end, flex-end，如下例所示。

#{母公司显示:网格; ｝ # child1 { align-self:结束; ｝ /*额外的样式片段*/ #{母公司身高:150 px; 背景:# 5548 b0; 颜色:# fff; 填充:10 px; 字体类型:无衬线; ｝ # child1 { 高度:50 px; 宽度:50 px; 背景:# 6 a67ce; text-align:中心; vertical-align:中间; 行高:50 px; ｝ < div id = "父" > <！——这里的其他元素——> " child1 " < div id = > 1 < / div > < / div >

2019-08-22 16:25:47

为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面，就像使用相对定位(bottom:0px;)的情况一样。

2013-07-11 16:13:00

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

推荐文章

最新文章

标签