HTML绝对元素

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类div标签作为亲本的许多其它元件。因为postcell div标签的数量由动态创建并由前端用户决定。

我的问题是，即使我添加了id = postspantitle和class = postptextdiv的div标签，postcell相对定位，class = postcell div标签的高度根本不会改变。我想为postcell div标签设置背景，所以它的内容可以在这些独立的背景中。但是，因为高度不会随着添加到class = postcell中而改变，所以我不能将背景设置为class = postcell div标签，因为它只会看起来像一条线。我想补充的图像：

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

绿色边境类= postcell

红色是类= postcell的童装。

在此先感谢。

Answer 1

您不能让孩子设置为绝对位置，并期望他们调整父母的位置。

这基本上是反对什么立场：绝对。

如果您想让.postcell动态调整大小，您只需从子项中移除position：absolute行。

如果你有理由不能做到这一点，那么另一种方法是编写js，将每个细胞的高度设置为它的孩子的身高。

jQuery的代码示例：

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