logo标签列表

CSS - 如何将元素定位到其父容器的底部？

css
5
在以下示例中，我试图将子div（粉色矩形）放在其父div的底部。 我尝试使用我找到的建议这个stackoverflow线程，但它没有帮助。 有什么想法吗？
<html>
<style type="text/css"> 
    .a {        
        background: gray;
        height: 80px;
    }
    .b {
        background: pink;
        float:  right;                              
        bottom: 0px;
    }   
</style>
<body>
<div class="a">
    the parent
    <div class="b"> child
    </div>
</div>  
</body>
<html>
我不太确定你所说的“放在底部”是什么意思。你能给我们举个更详细的例子吗？ - ALOToverflow
要对齐到底部。即“粘”在底部 - 粉色矩形的下边缘将与灰色矩形的下边缘在同一行上。 - GyRo
5个回答
5

将父元素设为"position: relative"，子元素设为"position: absolute"。然后可以使用"right: 0; bottom: 0"来定位子元素。

<html>
<style type="text/css"> 
    .a {             
        position: relative;
        background: gray;
        height: 80px;
    }
    .b {
        background: pink;
        position: absolute;         
        bottom: 0px;       
        right: 0px;
    }   
</style>
<body>
<div class="a">
    the parent
    <div class="b"> child
    </div>
</div>  
</body>
<html>
2

编辑：以下是完整的HTML，展示了评论中讨论的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"> 
    .a {        
        background: gray;
        position: relative;
    }
    .b {
        background: pink;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }   
</style>
<body>
<div class="a">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut quam sapien, id dictum purus. Ut vel consectetur justo. Sed suscipit justo ullamcorper diam interdum laoreet pulvinar nisl laoreet. Sed sem est, feugiat commodo bibendum vel, laoreet ac sapien. Fusce nisl nulla, commodo ut ultricies ut, iaculis a dolor. Nunc ultrices elit at tellus scelerisque vel vestibulum justo pretium. Suspendisse potenti. Suspendisse nec felis sem. Donec at tellus dolor, vehicula placerat lacus. Ut non libero at massa convallis imperdiet non rhoncus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nibh velit, congue quis tincidunt sed, feugiat a turpis. Phasellus erat justo, dictum non iaculis sit amet, auctor quis neque. Cras leo tortor, consequat non tincidunt sed, lacinia ut nibh. Etiam eu mollis quam. In eu felis velit, at bibendum sapien. Aenean sed est urna. Sed dignissim dapibus dolor sed pellentesque. Aliquam viverra ipsum sit amet justo gravida in facilisis sapien volutpat.

    <p>Suspendisse commodo vulputate nunc, vitae commodo tellus varius eu. Donec adipiscing diam vel felis blandit lobortis. Donec et turpis nunc. Curabitur ac elementum mi. Aenean libero ipsum, lacinia sit amet ornare sed, sollicitudin quis libero. Vestibulum ullamcorper ullamcorper luctus. Aenean pretium ornare tempor. Sed ultricies eros sem. Aenean placerat tristique tellus nec sodales. Proin sed justo non libero condimentum commodo. Quisque sed nisl nisi, vel mattis nisl. Phasellus rhoncus pharetra egestas. Quisque nec arcu ac neque placerat rutrum. In feugiat justo ac orci dignissim rhoncus. Mauris vitae fringilla magna.

    <p>Nam sagittis erat id sapien lacinia ultrices. Pellentesque ultrices, justo vitae blandit convallis, felis mi laoreet sem, in pharetra libero mauris eget nisl. Etiam in mi eget elit bibendum consectetur et nec nibh. Curabitur in justo arcu. Morbi eget venenatis enim. Duis tempor quam lacinia elit consequat sit amet blandit dolor vulputate. Aenean massa libero, suscipit eu tristique id, imperdiet pellentesque justo. Proin rutrum erat sit amet orci iaculis ut lobortis turpis sagittis. Nam luctus mollis mi, nec laoreet urna semper vitae. Pellentesque in massa enim. Etiam fermentum urna vitae lorem consequat pretium. Maecenas id ligula diam, id consectetur purus. Vestibulum libero velit, tempor hendrerit posuere ut, rutrum nec velit. Suspendisse id pulvinar erat. Sed vulputate, nibh id vulputate vestibulum, dolor elit tincidunt est, sed varius neque tellus tincidunt erat. Nunc volutpat eros in diam semper dictum. Quisque ut ligula felis.

    <p>Ut pharetra feugiat nisi eu viverra. Praesent sollicitudin iaculis elit, ac lobortis ante consectetur sed. Nullam sit amet enim eget massa dapibus molestie. Donec orci diam, tempor sit amet aliquet eget, placerat in nulla. Sed et sollicitudin mi. Donec pulvinar elit pharetra urna ornare sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mi libero. Ut et ipsum nec enim adipiscing pellentesque a nec quam. Pellentesque viverra, enim id auctor lacinia, turpis leo blandit odio, et luctus orci purus at nunc. Morbi eu sem id diam aliquam egestas. Vestibulum hendrerit lobortis est a convallis. Nunc quis quam odio, a eleifend dolor.

    <p>Vivamus sollicitudin convallis diam, ut luctus ipsum viverra in. Morbi sit amet sapien urna, sit amet dictum nisi. Duis elit tortor, iaculis nec feugiat in, aliquam ut nisl. Nulla scelerisque sagittis aliquam. Ut tempus auctor tempus. Aliquam auctor vulputate volutpat. Praesent libero orci, volutpat a volutpat ac, vulputate at enim. Phasellus semper sem sed velit bibendum tempus. Aenean ut mauris nisl. Nam sit amet ipsum arcu. Phasellus pretium venenatis egestas. Ut in nulla sem. Proin aliquet facilisis lectus non consequat. Nullam vel magna et ligula viverra sagittis. Fusce in massa in quam vehicula convallis. Nullam placerat erat in nunc eleifend sed dapibus elit tempor.

    <p>Aliquam in erat mi. Suspendisse dui dui, facilisis ac lobortis id, mollis quis enim. Aliquam erat volutpat. Sed in porta arcu. Maecenas aliquam congue sem, at scelerisque odio pharetra ac. In egestas rutrum cursus. Aliquam erat volutpat. Etiam a libero risus. Morbi odio eros, sollicitudin vel mattis vel, aliquet a elit. Suspendisse vel lectus risus, in iaculis ipsum. Etiam vitae justo nibh, non bibendum purus. Quisque mi erat, accumsan sit amet fringilla eu, rhoncus sed ipsum. Ut ac leo a nunc accumsan placerat at ut mauris. Aliquam imperdiet urna urna.

    <div class="b"> child
    </div>
</div>  
</body>
<html>
我不理解为什么会有人给你点踩，所以我给你点赞（因为你提供了正确的答案），以恢复一些声望值。虽然我建议你解释一下你的答案，因为问题暗示着楼主对CSS还不熟悉或者缺乏经验。 - David Thomas
我不知道CSS有任何的理由背后 :) - Eduardo Molteni
哦，而且“代码”价值千言万语。 - Eduardo Molteni
1
是的，你说得对，它现在可用。 我以前试过（显然有点不同，但当父元素处于'relative'位置而子元素处于'absolute'位置时），结果是粉色元素在页面底部超出了其父元素的边界。 但现在它又可以用了。案件结案（-; - GyRo
抱歉 - 我发现这个答案并不令人满意 - 将子元素设置为绝对定位会将其与窗口相关联。如果我从父级div中删除以下行：'height: 80px;' 那么子元素将移动到窗口底部。如果我无法确定父DIV的大小，则此解决方案无效。当我有一个我不知道大小的DIV，并且想在其中放置图像和文本，两者都应该对齐到底部时，就会发生这种情况 - div的高度将根据动态更改的图像的高度确定。 - GyRo
如果将父级设为relative，并将子级设为absolute，则子级将相对于父级而不是窗口定位。请尝试答案中显示的HTML代码。 - Eduardo Molteni
1
为了使用位置属性（top，right，bottom，left），元素的 position CSS 属性必须是 relative、absolute 或 fixed。
此外，这些位置将相对于元素的偏移父级进行计算。为了使它们相对于您的 .a 元素，它需要具有 position: relative。
在您的情况下，您需要编写：

.a {  
    background: gray;
    height: 80px;
    position: relative;
}

.b {
    background: pink;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
如果我不能使父级位置变为相对位置，那么该怎么办？在这种情况下可以做什么？ - GyRo
为什么您不能将父元素的 position 属性设置为 relative？ - SLaks
0

最好的方法是使用相对/绝对定位（正如其他答案中提到的）。另一种方法（如果父元素和子元素都有已知高度）是在子元素上设置顶部边距：

.a {        
    background: gray;
    height: 80px;
}

.b {
    background: pink;
    float:  right;       
    height: 20px;
    margin-top: 60px;                       
}
0

.b需要position:relative;，而使用absolute会根据窗口大小定位它，而不是父元素。

还有一个vertical-align可以让您获得“真正”的底部对齐方式，但只能与表格显示属性（如table-cell）一起使用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接