Parent Div在動態添加div時不調整高度

我正在動態添加div，如http://jsfiddle.net/Lijo/ZkLg6/5/中所示。Parent Div在動態添加div時不調整高度

當添加子元素時，父級#mainHolder div不會增加其寬度 - 因此子級會破壞父級div。我們如何通過調整父級高度來克服這個問題？

enter image description here

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

來源

2012-09-17 Lijo

添加溢出：汽車在這裏

#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-17 10:41:19 Sowmya

+1爲你的很好的答案，我們可以給溢出：隱藏;因爲它支持Mac電腦也溢出：auto;不支持。 –

@ShailenderArora是的，即使是隱藏的作品 – Sowmya

是@Sowymya我只是表達我的意見溢出：隱藏; :-) –

嘗試添加溢出：auto;到#mainHolder的CSS。

來源

2012-09-17 10:43:07

解決的辦法是在你的#mainHolder的最後添加一個元素，並在其之前插入元素（或者每次添加一個新div時繼續移除並重新添加它，這是因爲你正在使用浮動元素，如果你可以從其他的div下降浮法一切都應該按預期工作溢出：自動;解決方案也還不錯，似乎簡單

來源

2012-09-17 10:43:31 xception

完美！謝謝！ –

試試這個：http://jsfiddle.net/ZkLg6/7/

解決方法是使用清除一個div我不得不將你的動態元素推入到mainHolder中的嵌套div中，以確保clear div總是在它們下面，但它運行良好。

來源

2012-09-17 10:43:36

嘗試是這樣的：

#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中。像那些有色的。 Here已更新JS小提琴。

嗯。但是，如果你想增加WIDTH而不是HEIGHT，那就行了。如果你想增加高度 - 只需添加溢出：隱藏;另外你的CSS還有一些變化。看看JSfiddle

來源

2012-09-17 10:44:29

你必須清除浮動。你可以這樣做插入一個像br一樣清晰的元素：二者。

下面是一段代碼，你可以在訂單添加到工作：

$('#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-17 10:47:56 gabitzish

入住這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-17 10:50:34

-1

設置溢出和高度爲auto，現在父div的offsetHeight將更新動態！

來源

2013-10-24 14:45:04 Hank

Parent Div在動態添加div時不調整高度

回答

相關問題