6

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

8 回答 8

20

添加溢出：自动

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

于 2012-09-17T10:41:19.653 回答
2

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

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

于 2012-09-17T10:43:36.723 回答
1

尝试添加溢出：自动；到#mainHolder 的CSS。

于 2012-09-17T10:43:07.070 回答
1

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

于 2012-09-17T10:43:31.633 回答
0

尝试这样的事情：

#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 中。喜欢那些有颜色的。这是更新的 JS 小提琴。

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

于 2012-09-17T10:44:29.860 回答
0

你必须清除浮动。您可以插入像 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/

于 2012-09-17T10:47:56.517 回答
0

检查这个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;
}
于 2012-09-17T10:50:34.823 回答
-1

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

于 2013-10-24T14:45:04.683 回答