高度的自適應（父div高度隨子div的高度改變而改變）

1、如果父div不定義height、子div均為標準流的時候，父div的height隨內容的變化而變化,實現父div高度隨子div的高度改變而改變。


<style type="text/css">
?
?????#aa{}{ border:#000000 solid 5px}
?
?????#bb{}{border:#00ffff solid 5px;}
?
?????#cc{}{ border:#0033CC solid 5px}
?
</style>
?
<div id="aa">父div
?
?????<div id="bb">子div</div>
?
?????<div id="cc">子div</div>
?
</div>


2、如果子div使用了float屬性，此時已經脫離標準流，父div不會隨內容的高度變化而變化，解決的辦法是在浮動的div下面，加一個空div，設置clear屬性both


??<style type="text/css">

?
????#aa{}{ border:#000000 solid 5px;}
?
????#bb{}{border:#00ffff solid 5px;float:left}
?
????#cc{}{ border:#0033CC solid 5px;float:left}
?
</style>
?
<div id="aa">父div
?
????<div id="bb">子div</div>
?
????<div id="cc">子div</div>
?
???<div style="clear:both"></div>
?
</div>


參考資料： css中div高度自適應 http://www.studyofnet.com/news/143.html

總結

以上是生活随笔為你收集整理的css中div高度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。