-1

尝试使用 CSS 来定位一个 div，这样：

a）它出现在其包含之外div（我可以这样做），并且，

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

从视觉上看，最终结果应该是 div 似乎位于其 contains 之上，div如下图所示：

在此处输入图像描述

注意：图中“A”的高度div根据其内容而有所不同，因此将其“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>

谢谢！

4

2 回答 2

0

这是一种方法。

对于以下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% 或#div-B.

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

请注意，如果#div-A有足够的文本，它的高度可能会延伸到视口之外，并且某些内容将不可见。

于 2013-10-01T16:22:25.907 回答
0

您可以使用position: absolutefor div "A"，但这里是更舒适的方式 >演示

于 2013-10-01T15:50:32.083 回答