div高度不能自适应(子级使用float浮动,父级div高度不能自适应)
1、问题截图:
2、问题描述:
由于地址、公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不能自适应
3、HTML代码:
<div class="right-info3"> <div class="address_info"> <li class="company">深圳华东纱线纺织有限公司</li> <li class="master">李启东</li> <li class="address">深圳市南山区华龙大道65号</li> <li class="code">500021</li> <li class="phone">139****8888</li> <li class="operate"><a class="revise" href="#nowhere">修改</a> | <a class="delete" href="#nowhere">删除</a></li> </div> <div class="address_info"> <li class="company">深圳东风华东纱线纺织有限公司</li> <li class="master">李启东</li> <li class="address">深圳市南山区华龙大道101号A3栋21楼102室深圳市南山区华龙大道101号A3栋21楼102室</li> <li class="code">500021</li> <li class="phone">139****8888</li> <li class="operate"><a class="revise" href="#nowhere">修改</a> | <a class="delete" href="#nowhere">删除</a></li> </div> </div>
4、CSS代码:
.right-info3{ width: 960px; margin-left: 10px; margin-top: 10px; list-style: none; font-family: "微软雅黑"; font-size: 16px; color: #333333; } .address_info{ width: 960px; min-height: 48px; background-color: #F7FCFF; border: 1px solid #e8e8e8; margin-top: 10px; } .address_info li{ float: left; //因为此处设置了float所以导致了父级div高度不能自适应 margin-top: 13px; margin-bottom: 13px; } .company{ width: 200px; margin: 0 15px; } .master{ width: 80px; margin: 0 15px; } .address{ width: 240px; margin: 0 10px; } .code{ width: 90px; margin: 0 10px 0 20px; } .phone{ width: 114px; margin: 0 15px 0 10px; } .revise{ color: #38adff; } .delete{ color: #333333; }
5、解决办法:
在父级标签div闭合之前,即父级的</div>之前,加上以下代码,用于清除浮动对象
<div class="clear"></div>
然后给clear添加以下样式
.clear{ clear: both; }
6、解决后效果图: