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. 面试题: 数据库 sql优化 sql练习题 有用 学生表,课程表,成绩表,教师表 练习

    什么是存储过程?有哪些优缺点? 什么是存储过程?有哪些优缺点? 存储过程就像我们编程语言中的函数一样,封装了我们的代码(PLSQL.T-SQL). 存储过程的优点: 能够将代码封装起来 保存在数据库之 ...

  2. Centos 6.5 下Nginx安装部署https服务器

    一般我们都需要先装pcre, zlib,前者为了重写rewrite,后者为了gzip压缩.1.选定源码目录选定目录 /usr/local/cd /usr/local/2.安装PCRE库cd /usr/ ...

  3. Django ORM 那些相关操作

    Django ORM 那些相关操作 一般操作 必知必会13条 <> all(): #查询所有的结果 <> filter(**kwargs) # 它包含了与所给筛选条件相匹配的对 ...

  4. (I/O完成端口中的)995错误

    在windows下,可能会出现995的错误,msdn对该错误的解释为: The I/O operation has been aborted because of either a thread ex ...

  5. QDUOJ 河老师的新年礼物(尺取法)

    河老师的新年礼物 发布时间: 2017年1月1日 15:11   最后更新: 2017年1月1日 15:13   时间限制: 1000ms   内存限制: 256M 描述 河老师的新年礼物是一个长度为 ...

  6. Elasticsearch Query DSL查询入门

    本篇为学习DSL时做的笔记,适合ES新手,大佬请略过~ Query DSL又叫查询表达式,是一种非常灵活又富有表现力的查询语言,采用JSON接口的方式实现丰富的查询,并使你的查询语句更灵活.更精确.更 ...

  7. 【Java面试题系列】:Java基础知识常见面试题汇总 第二篇

    文中面试题从茫茫网海中精心筛选,如有错误,欢迎指正! 第一篇链接:[Java面试题系列]:Java基础知识常见面试题汇总 第一篇 1.JDK,JRE,JVM三者之间的联系和区别 你是否考虑过我们写的x ...

  8. 洛谷P3200 [HNOI2009]有趣的数列(Catalan数)

    P3200 [HNOI2009]有趣的数列 题目描述 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足 ...

  9. IT兄弟连 JavaWeb教程 AJAX中参数传递问题

    使用Ajax发送GET请求并需要传递参数时,直接在URL地址后拼接参数,格式如下: xhr.open('get','请求路径?参数名1=参数值1&参数名2=参数值2...',true); 使用 ...

  10. 理解SPI

    SPI 全称为 Service Provider Interface,是一种服务发现机制.SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时, ...