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

  • 相关阅读:
    CPP Info Memo part3
    在Google搜索结果显示原始链接(转自 月光博客)
    libc 之 locales
    Git 分支管理与本地 repository 创建
    py2exe issue: ImportError: No module named _fontdata_enc_winansi (http://stackoverflow.com/)
    CPP Info Memo (Part 1)
    CPP Info Memo part2
    HOWTO: Increase write speed by 'aligning' FAT32(通过对齐 FAT32 提高U盘访问速度, 转载)
    (转载)Gentoo中文man乱码
    如何选择开源许可证?(转载)
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/7151500.html
Copyright © 2011-2022 走看看