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

Question

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

我正在动态添加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>")
 }

Run Code Online (Sandbox Code Playgroud)

}
);

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sow*_*mya 18

添加溢出:自动

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

Run Code Online (Sandbox Code Playgroud)

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

为你的好答案+1我们可以溢出:隐藏; 因为它支持Mac电脑也溢出:auto; 不支持. (2认同)

归档时间：	13 年，11 月前
查看次数：	12863 次
最近记录：	9 年前