动态添加div时父div不调整高度答案

【问题标题】：Parent Div does not adjust height when adding div dynamically动态添加div时父div不调整高度
【发布时间】：2012-09-17 10:37:43
【问题描述】：

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

当添加子元素时，父#mainHolder div 不会增加其宽度 - 结果是子元素破坏了父 div。我们如何通过调整父 div 的高度来克服这个问题？

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;
}

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

+1 为您提供不错的答案，我们可以给出溢出：隐藏；因为它支持Mac电脑也溢出：自动；不支持。
是的@Sowymya 我只是在表达我对溢出的看法：隐藏； :-)

【解决方案2】：

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

解决方法是使用 div 清除浮动元素。我不得不将您的动态元素推入 mainHolder 内的嵌套 div 中，以确保 clear div 始终位于它们下方，但效果很好。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

解决方案是在 #mainHolder 末尾添加 a 并在其之前插入元素（或者每次添加新 div 时都删除并重新添加它。这是因为您使用的是浮点数，或者如果您可以从其他 div 中删除浮动，一切都应该按预期工作。overflow: auto; 解决方案也很好，看起来更简单。

【讨论】：

完美！谢谢！

【解决方案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 fiddle。

嗯。但如果你想增加宽度，而不是高度，这很有效。如果你想增加高度 - 只需添加溢出：隐藏；另外，您的 css 中还有一些变化。看看JSfiddle

【讨论】：

【解决方案6】：

你必须清除浮动。您可以插入像 br 这样具有 clear:both 的元素。

这是您可以添加的一段代码以便工作：

$('#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/

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案8】：

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

【讨论】：