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

  • 相关阅读:
    4.使用webpack-dev-server工具实现自动打包编译的功能
    3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口
    2.webpack最基本的使用方式
    启动nginx 80端口被占用:tcp 0 0 127.0.0.1:80 127.0.0.1:34932 TIME_WAIT
    template标签就相当于React中的fragment
    初窥AST
    npm 中的 --
    你不知道的环境变量(转)
    非捕获分组 正向预查 与反向预查
    border-radius 如何计算
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/7151500.html
Copyright © 2011-2022 走看看