让div父元素的高度随子元素高度的变化而变化

最新推荐文章于 2022-03-08 22:09:07 发布

又是两个大汉堡

最新推荐文章于 2022-03-08 22:09:07 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/hfdgjhv/article/details/83956403

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

先看下html代码：

<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;}    #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>    <div id="footer">footer</div> </body>  </html>

-----------------------------------------------------------------------------------------------------------------

以上代码效果如下：

很明显呀，以上的效果不是我们想要的，我想要的效果是#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>