html - 绝对位置溢出

Question

我有一个div和另一个div里面。第二个div有width和。这个有绝对位置，所以它的容器没有显示。heightbackground-color: green

<div id="root">

<div id="r1">

    <div id="r2">

    </div>
</div>
Mas
</div>

CSS 文件

#root{
width:300px;
background-color: red;
}

#r1{

position: relative;
width: 100px;
background: yellow;

}

#r2{
position: absolute;
display: inline-block;
width: 50px;
height: 50px;
left: 0;
background-color: green;
}

http://jsfiddle.net/sev2E/1/

我想知道是否有可能显示它的容器并用绝对位置包装 div。

我想看到这样的东西，但不使用相对位置，也不给它的容器增加高度。

http://jsfiddle.net/sev2E/2/

谢谢！

Answer 1

为您的 r1 css 添加一些高度

#r1{

    position: relative;
    width: 100px;
    background: yellow;
    height:60px;

或添加一个 padding-bottom:"height of your div" 这是相同的

#r1{

    position: relative;
    width: 100px;
    background: yellow;
    padding-bottom:55px

}

Answer 2

最简洁的答案是不。

一旦你绝对定位了一个元素，它就会从文档流中取出，并且不再考虑计算其包含块的高度或宽度。

Android API（用 Java 编写）使用的文本格式化模型与现代浏览器实现的 CSS 兼容的不同。

要在基于 CSS 的网页和 Android 界面布局之间获得相似的视觉效果，您需要根据所使用的每种语言的规则和约束对每个实现进行编码。

Pumpkinpro 的答案本质上是在 CSS 中获得“wrap_content”效果的方法。