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

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

css

Css 如何定位div，使其底部与包含div的顶部对齐,css,Css,尝试使用CSS定位div，以便： a）它出现在它的containingdiv（我可以这么做）之外 b） div的下边缘与其包含的div的上边缘相邻（我正在努力解决这个问题）从视觉上看，最终结果应该是div似乎位于其包含的div之上，如下图所示：注意：图表中的div“A”的高度根据其内容而变化，因此将其“top”属性设置为“-150px”或其他负常量将不起作用。我也试图避免使用JS，但如果我不能单独使用CSS来实现这一点，我会使用它示例代码： <body> <d

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

a）它出现在它的containing

div

（我可以这么做）之外

b）

div

的下边缘与其包含的

div

的上边缘相邻（我正在努力解决这个问题）

从视觉上看，最终结果应该是div似乎位于其包含的

div

之上，如下图所示：

注意：图表中的

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>


这是一堆文本。这是一堆文本。这是一堆文本。这是一堆文本。这是一堆文本。这是一堆文本。

谢谢

您可以对div“A”使用

position:absolute

，但这里有一种更舒适的方法>

这里有一种方法

对于以下HTML：

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

请参见演示：

使用绝对定位，通过将框偏移量

底部设置为100%或#div-B
的像素高度，将#div-A
移出#div-B
流并移到顶部
我创建了一个10px的偏移量来说明你的控件
请注意如果#div-A
有足够的文本，其高度可能会超出视图端口，部分内容将不可见。
因此需要代码，而不是图片。这不是愚蠢的，而是明智的。发布您尝试过的内容。添加了示例代码@isherwood。我不知道这会给我的问题增加多少，但它确实存在。添加代码会让试图帮助你的人更容易，也会让你更容易描述你试图解决的问题。很多时候，你可以得到一两张赞成票，有点像老师给你的金星！欢迎来到SO！谢谢，但在您的示例中，div B不包含div A，这是我的应用程序所必需的。太棒了。谢谢@Marc Audet。正是我需要的。我会投票支持你的答案，但显然我还是太处女了。非常欢迎你！我认为15点的声望让你放弃了投票权。祝你一切顺利！