我正在动态添加 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;
}
最佳答案
添加溢出:自动
#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
}
关于html - 动态添加div时父div不调整高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12457547/