Question

我试图垂直对齐底部另一个div内的div，我不想使用相对/绝对定位。下面是我的标记。它似乎工作。但我不确定这是否是最好的解决方案。任何人都可以推荐更好的方法？另外，在FF中如果我移除容器周围的边框，它就会停止工作。有谁知道为什么？谢谢康斯坦丁


<html>
<head>
    <style type="text/css">
        .container
        {
            background-color: #ffff00;
            height: 100px;
            line-height: 100px;
            border: solid 1px #666666;
        }
        .container .content
        {
            margin-top: 60px;
            background-color: #ffbbbb;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">test</div>
    </div>
</body>
</html>

Answer 1

使用绝对定位。我认为你不想使用绝对定位的原因很可能是基于误解。也就是说，如果容器也有position属性，绝对定位将不是关于整个页面，而是关于容器，然后你会得到你想要的东西：

.container
{
    position: relative;
}

.container .content
{
    position: absolute;
    bottom: 0px;
}

现在，无论大小如何，您的内容都将位于容器的底部。

Answer 2

这将有效...唯一的事情是你无法在空的前60像素中放置任何东西。

Answer 3

我相信如果你正在寻找最佳解决方案，你应该确实使用相对/绝对定位。

您是否有任何特定原因试图避免相对/绝对定位？

试图垂直对齐div内的div

3 个答案: