给定以下HTML:

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

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


当前回答

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

#container {
  display: table;
}

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

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

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

其他回答

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

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

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

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

position:absolute;
bottom:0;

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 >

灵活的方法!

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

例子

.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 >


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