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

div高度不能自适应(子级使用float浮动,父级div高度不能自适应)的更多相关文章
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
- float浮动问题:会造成父级元素高度坍塌;
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- 子级div相对于父级div位置不变
设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV
标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...
随机推荐
- python脚本修改hosts文件
用python3写了个修改hosts的小脚本,没有技术含量,顺带复习一下文件操作和os.sys模块的内容了. # -*- coding:utf-8 -*- #!/usr/bin/env python ...
- 第3章 编写ROS程序-3
1.订阅者程序 我们继续使用 turtlesim 作为测试平台,订阅 turtlesim_node发布的/turtle1/pose 话题. 这一话题的消息描述了海龟的位姿 (位置和朝向) .尽管目前你 ...
- 远程抓取win7 的用户登录时间
protected void Page_Load(object sender, EventArgs e) { InvokeSystemPS("query user /server:192.1 ...
- 快速发现并解决maven依赖传递冲突
此文已由作者翟曜授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 最近在测试过程中,遇到了几次maven传递依赖冲突的问题,所以记录下解决的过程,遇到类似问题供参照. 问题现象 ...
- python矩阵相加
举个栗子: # 两个 3 行 3 列的矩阵,实现其对应位置的数据相加,并返回一个新矩阵: # 使用 for 迭代并取出 X 和 Y 矩阵中对应位置的值,相加后放到新矩阵的对应位置中. import n ...
- JSON parse error: Cannot deserialize value of type `java.time.LocalDateTime` from String
在使用Postman测试Spring Boot项目接口时,接口返回JSON parse error: Cannot deserialize value of type `java.time.Local ...
- AI决策算法 之 GOAP (三)
源码地址:http://pan.baidu.com/s/1dFwzmfB 这篇我们使用上篇文章写的GOAP框架来完成一个实例: 实例内容: AI有10HP, 需要去站岗,站岗完成扣5HP 当HP< ...
- 洛谷P2136 拉近距离
题目背景 我是源点,你是终点.我们之间有负权环. --小明 题目描述 在小明和小红的生活中,有\(N\)个关键的节点.有\(M\)个事件,记为一个三元组\((S_i,T_i,W_i)\),表示从节点\ ...
- iOS 隐藏百度地图SDK的百度LOGO
第一个思路:找到LOGO对应的UIIMageView,并将其隐藏hidden // 隐藏百度地图Logo UIView *mView = _mapView.subviews.firstObject; ...
- Codeforces 1168A(二分check)
关键是check.要注意到其实有了mid以后每个位置都是独立的,它能从哪走到哪是固定了的,只要从左到右尽量贪心压着最小值即可. #include <cstdio> const int ma ...