绝对位置溢出

时间:2013-06-12 09:41:15

标签: html css html5 css3

我的div内有另一个div。第二个divwidthheightbackground-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/

谢谢!

2 个答案:

答案 0 :(得分:2)

为你的r1 css添加一些高度

#r1{

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

或添加填充底部:“你的div的高度”是相同的

#r1{

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

}

答案 1 :(得分:1)

简短的回答是否定的。

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

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

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

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