Question

尝试使用CSS来定位div，以便：

a）它出现在其包含div（我可以做）和

之外

b）div的下边缘与其包含div的顶边相邻（我正在努力）。

从视觉上看，最终结果应该是div似乎位于包含div的顶部，如下图所示：

enter image description here

注意：图中div“A”的高度因其内容而异，因此将其“top”属性设置为“-150px”或其他一些负常量将不起作用。我也试图避免使用JS，但如果单靠CSS无法实现这一点，我会使用它。

示例代码：

<body>
    <div id="div-B" style="
         position: absolute;
         top: 200px;
         left: 200px;
         height: 200px;
         width: 200px;
         background: red;
         ">
        <div id="div-A" style="
         width: 150px;
         background: green;
         ">
            This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text.
        </div> 
    </div>
</body>

谢谢！

Answer 1

您可以将position: absolute用于div＆＃34; A＆＃34;，但这里的方式更为舒适＆gt; demo

Answer 2

这是一种方法。

对于以下 HTML ：

<div id="div-B">
    <div id="div-A">Lorem ipsum dolor sit amet...</div>
</div>

应用此 CSS ：

#div-B {
    position: absolute;
    top: 200px;
    left: 200px;
    height: 200px;
    width: 200px;
    background: red;
}
#div-A {
    height: auto;
    width: 150px;
    background: green;
    position: absolute;
    bottom: 210px;
    left: 10px;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/ZM4tT/

使用绝对定位将#div-A移出#div-B并将其移至顶部，方法是将框偏移bottom设置为100％或像素高度{{1} }。

我创建了一个10px偏移量来说明你拥有的控件。

注意如果#div-B有足够的文字，其高度可能会延伸到视图端口之外，而某些内容将无法显示。

如何定位div使其底部与其包含div的顶部对齐

2 个答案: