讓div父元素的高度隨子元素高度的變化而變化
阿新 • • 發佈：2018-11-11
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
先看下html程式碼：
<html> <head> <title>test</title> </head -----------------------------------------------------------------------------------------------------------------
以上程式碼效果如下：
很明顯呀，以上的效果不是我們想要的，我想要的效果是#main的div盒子高度等於其子元素的高度。
解決方法：
1、在父元素(#main)div盒子後面加一個空白的div盒子: <div class="clear"></div>
2、設定空白div(class="clear")盒子的CSS樣式，清除所有浮動。
---------------------------------------------------------------------------------------------------------------
修改後的程式碼如下：
<html> <head> <title>test</title> </head> <style type="text/css"> /* main是父元素沒有設定高度，我們想讓其隨子元素高度的變化而變化*/ #main{width:800px; border:5px solid red;} #left{width:400px; height:200px; background:green; float:left;} #right{width:200px; height:100px; background:blue; float:right;} .clear{clear:both;} /* 清除空白盒子的所有浮動 */ #footer{width:800px; border:1px solid #ccc;} </style> <body> <div id="main"> <!-- 父元素 --> <div id="left">left</div> <!--子元素1--> <div id="right">right</div> <!--子元素2--> <div class="clear"></div> <!-- 空白盒子 --> </div> <div id="footer">footer</div> </body> </html>修改後的效果如下：
OK，以上就是我們想要的效果了。。。
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
