Question

我的布局如下：

 <div style="margin-top:0%" class="postcell">    


                    <div id="postspantitle" >  
                        <span  class="texts"><?php echo __('Başlık :', 'goldmem');?></span>
                    </div>

                    <div class="postptextdiv" >
                        <input class="postptext" type="text" id="posttitle">
                    </div>

  </div>

和css如下：

.postcell
{
    position:relative;
    border-style:solid;
    border-color:green;   
    border-width:3px;
    margin-top:7%

}

#postspantitle
{
    position:absolute;
    margin-top:-1%;
    left:0%;
    border-style:solid;
    border-color:red;   
    border-width:3px;

}

.postptextdiv
{
    margin-top:-1%;
    left:20%;
    border-style:solid;
    border-color:red; 
    border-width:3px;
    position:absolute;
}

我有许多其他元素，postcell class div标签为parent。因为postcell div标签的数量是动态创建的并由前端用户决定。

我的问题是，因为postcell相对定位，即使我添加了id = postspantitle和class = postptextdiv的div标签，class = postcell div标签的高度根本不会改变。我想为postcell div标签设置背景，因此其中的内容可以处于这些单独的背景中。但是，由于我添加到class = postcell时高度没有变化，因此我无法将背景设置为class = postcell div标签，因为它只会看起来像一条线。我想添加一张图片：

http://i.imgur.com/57wmiqc.png

绿色边框是class = postcell

红色是class = postcell的孩子。

提前致谢。

Answer 1

您不能将子项设置为position：absolute并期望它们调整其父级的大小。

这基本上是针对什么位置：绝对的。

如果你想要.postcell动态调整大小，你所要做的就是从子节点中删除position：absolute行。

如果你有理由说明为什么你不能这样做，那么另一种方法是写js，将每个postcell的高度设置为它的孩子的高度。

jQuery代码示例：

$(".postcell").each( function() {
    var height = $(this).children("#postspantitle").height() + $(this).children(".postptextdiv").height();
    $(this).css("height", height + "px");
});

相对定位div标签中的html绝对元素

1 个答案: