1

我有如下布局：

 <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 标签的数量是动态创建的，由前端用户决定。

我的问题是，由于 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 的孩子。

提前致谢。

4

1 回答 1

0

您不能将孩子设置为 position : absolute 并期望他们调整其父母的大小。

这从根本上反对 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");
});
于 2013-08-18T13:06:10.717 回答