zoukankan      html  css  js  c++  java
  • 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、解决后效果图:

  • 相关阅读:
    config 文件夹中的 dev.env.js
    config 文件夹中的 index.js
    Dialog 对话框 可拖拽
    Pagination 分页 封装
    ElasticSearch学习03--使用Java连接ES
    ElasticSearch学习02--使用Kibana管理ES
    ElasticSearch学习01--基本结构与操作
    redis学习02--使用Jedis调用Redis
    redis学习01--常用命令
    Java基础学习08--JDK1.8特性
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/7151500.html
Copyright © 2011-2022 走看看