1

在我的一个页面上，我有以下结构，我试图将其用作一种工具提示样式行为。在单击“容器”元素之前，“子”元素将被隐藏。我想要做的是将孩子对齐在实际容器上方，但我的问题是孩子可以有一个可变的高度，所以我不知道如何正确对齐它。

这是我的概念代码：

<div id="container">
    <p>Some text</p>
    <div id="child">
        <p>Dynamic text so</p>
        <p>I never know the</p>
        <p>expected height</p>
    </div>
</div>


#container {
    width: 200px;
    height: 40px;
    border: 1px solid blue;
}

#child {
    position: absolute;
    bottom: 40px;
    border: 1px solid #red;
}

基本上我想要做的是将#child 的底部与#container 的顶部对齐，以便容器可以根据内容的值向上扩展而不受重构。尽管您可以在此处看到，但这并不能完全产生预期的结果：

http://jsfiddle.net/tA9wr/

它之所以有效，是因为我专门将#child 底部值设置为 130px。如果 #child 中的内容完全改变高度，这将不再有效。这是一个快速的 MS Paint 版本，我希望随着 #child 的高度变化而发生变化：

http://i.imgur.com/WxOWRPp.png

有什么想法可以完成我想要的吗？

4

1 回答 1

4

您需要绝对定位 div（相对于父级）并将底部属性设置为 100%（这意味着父级的全高）以将其放置在容器的顶部：

#container {
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 40px;
    background: blue;
    position: relative; /*set container to relative */
}

#child {
    width: 300px;
    background: red;
    position: absolute; /* position relative to container*/
    bottom: 100%; /*place bottom at top of container*/
}

这将使#child向上扩展

演示小提琴

于 2013-08-16T00:40:09.277 回答