html – 动态添加div时,父Div不调整高度_html-js-css

概述我正在动态添加div,如 http://jsfiddle.net/Lijo/ZkLg6/5/所示. 父元素#mainHolder div在添加子元素时不会增加其宽度 – 因此子节点会破坏父div.我们如何通过调整父div高度来克服这个问题？ jQuery的 $('input').click(function(){ var existingDirectChildrenDivCount = $(' 我正在动态添加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}

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

总结

以上是内存溢出为你收集整理的html – 动态添加div时,父Div不调整高度全部内容，希望文章能够帮你解决html – 动态添加div时,父Div不调整高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1050364.html

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

发表评论

评论列表（0条）