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

div高度不能自适应(子级使用float浮动,父级div高度不能自适应)的更多相关文章

  1. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  4. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  5. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  6. float浮动问题:会造成父级元素高度坍塌;

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  7. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  8. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

随机推荐

  1. 将eclipse java程序打包成jar的总结(包括工程中没有引用外部jar包和有引用外部jar包两种情况)

    一.当eclispe java工程中没有引用外部jar包时: 选中工程---->右键,Export...--->Java--->JAR file--->next-->填写 ...

  2. Redux API之combineReducers

    combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...

  3. 用expressjs写RESTful API

    http://blog.csdn.net/kiwi_coder/article/details/36424671     用expressjs写RESTful API http://blog.csdn ...

  4. OpenCPN介绍及编译

    OpenCPN介绍及编译 OpenCPN是一个航海应用软件系统,采用wxWidgets界面框架,支持OpenGL,可以跨平台运行在Windows , Linux , Mac电脑上. OpenCPN是一 ...

  5. SpringMVC使用fastjson自定义Converter支持返回jsonp格式(转)

    import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.serializer.SerializerFeature; import c ...

  6. MVC用户验证

    MVC提供了四种Filter(钩子),用于在Action执行之前或者之后,我们能够做一些事情,比如说判断有没有登录,比如说判断有没有权限. IAuthorizationFilter:在所有Filter ...

  7. 我也来Show一下我的VisualStudio2017

    1.首先,在微软官方网站下载VS2017的安装程序,后续的安装将通过这个安装程序来引导.这里有三个版本可供选择:社区版.专业版和企业版,社区版免费,专业版和企业版可以免费体验,之后收费,当然,在中国盗 ...

  8. Mac下安装rJava,xlsx,ReporteRs包

    xlsx包可以用来读取excel数据,ReporteRs包可以用来直接输出word报告,这两个包都对rJava包有依赖,所以必须先安装rJava. (1)查看mac的java信息 java版本: &g ...

  9. hdu1166(线段树单点更新&区间求和模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 题意:中文题诶- 思路:线段树单点更新,区间求和模板 代码: #include <iost ...

  10. 51nod1154(dp)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1154 题意:中文题目诶- 思路:字符串长度不大于5e3,O(n ...