动态添加div时，Parent Div不调整高度 [英] Parent Div does not adjust height when adding div dynamically
本文介绍了动态添加div时，Parent Div不调整高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在动态添加div，如
I am adding divs dynamically as shown in http://jsfiddle.net/Lijo/ZkLg6/5/.
The parent #mainHolder div is not increasing its width when child elements are added – as a result the children breaks the parent div. How can we overcome this by adjusting the parent div height?
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;
}
解决方案
Add overflow:auto
#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
}
Demo here http://jsfiddle.net/ZkLg6/11/
这篇关于动态添加div时，Parent Div不调整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
