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、解决后效果图:

 

posted @ 2017-07-11 17:05  Dreamsqin  阅读(803)  评论(0编辑  收藏  举报