给定以下HTML:

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

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


当前回答

如果您使用内联块元素的文本对齐特性知道#容器的高度,您确实可以在不使用position:absolute的情况下将方框对齐到底部。

在这里你可以看到它的行动。

这是代码:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

其他回答

试试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

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

演示 这是经过测试的工作在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的回答中指出的问题!

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

position:absolute;
bottom:0;

如果你不知道子块的高度:

#{母公司 背景:绿色; 宽度:200 px; 身高:200 px; 显示:表格单元; vertical-align:底部; } .child { 背景:红色; vertical-align:底部; } < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

http://jsbin.com/ULUXIFon/3/edit

如果你知道子块的高度,添加子块,然后添加padding-top/margin-top:

#{母公司 背景:绿色; 宽度:200 px; 身高:130 px; padding-top: 70 px; } .child { 背景:红色; vertical-align: 底; 身高:130 px; } < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

显示:w3schools.com

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

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