Question

我正在动态添加div，如http://jsfiddle.net/Lijo/ZkLg6/5/所示。

父元素#mainHolder div在添加子元素时不会增加其宽度 - 因此子节点会破坏父div。我们如何通过调整父div高度来克服这个问题？

enter image description here

的jQuery

$('input').click(function()
{
 var existingDirectChildrenDivCount = $('#mainHolder > div').size();



 if( existingDirectChildrenDivCount % 3 == 0)
 {
      $('#mainHolder').append ("<div class='firstDiv'> A  </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 1)
 {
      $('#mainHolder').append ("<div class='secondDiv'> B </div>")
 }

 if( existingDirectChildrenDivCount % 3 == 2)
 {
      $('#mainHolder').append ("<div class='thirdDiv'> C  </div>")
 }

}
）;

HTML

<html>

   <input type="submit" value="Add" />
   <br/>   
   <div id="mainHolder">
   S    
  </div>

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

</html>

CSS

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto;
}

.firstDiv
{
    float: left;
    display: inline;
    background-color: #f5B5f5;
    height:100px;
}

.secondDiv
{
    float: left;
    display: inline;
    background-color: #FF007F;
    height:100px;
}

.thirdDiv
{
    float: left;
    display: inline;
    background-color: Pink;
    height:100px;
}

Answer 1

添加溢出：自动

#mainHolder
{
    width: 400px;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:auto; overflow:auto
}

在这里演示http://jsfiddle.net/ZkLg6/11/

Answer 2

试试这个：http://jsfiddle.net/ZkLg6/7/

修复是使用清除浮动元素的div。我必须将你的动态元素推入mainHolder中的嵌套div，以确保clear div始终位于它们之下但效果很好。

Answer 3

尝试添加overflow：auto;到#mainHolder的CSS。

Answer 4

解决方案是在#mainHolder的末尾添加一个并在此之前插入元素（或者每次添加新div时继续删除并重新添加它。这是因为你正在使用浮点数，或者如果你可以从其他div中删除浮点数所有应该按预期工作。溢出：auto;解决方案也很好，看起来更简单。

Answer 5

尝试这样的事情：

#mainHolder
{
    min-width: 400px;
    float:left;
    border-top: 3px solid orange;
    border-bottom: 3px solid red;
    border-left: 3px solid purple;
    border-right: 3px solid pink;
    height:20px;
}

这里唯一的问题是字母“S”，但你可以把它放在一些div中。像那些有色的。 Here更新了JS小提琴。

嗯。但是如果你想增加宽度而不是高度，那就有效。如果你想增加高度 - 只需添加溢出：隐藏;另外，你的css还有一些更改。看看JSfiddle

Answer 6

你必须清除浮动。你可以这样做插入像br这样明确的元素：两者。

以下是您可以添加的一段代码：

$('#mainHolder').find("br").remove(); // remove already added br
$("<br>").css({clear : "both"}).appendTo($('#mainHolder')); // append a br after the last element.

我已经更新了你的jsFiddle：http://jsfiddle.net/ZkLg6/13/

Answer 7

检查此http://jsfiddle.net/ZkLg6/19/
我使用了overflow:hidden

#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:hidden;
}

Answer 8

将overflow和height设置为auto，现在父div的offsetHeight将动态更新！

动态添加div时，父Div不调整高度

8 个答案: