给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
给定以下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>