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. CodeForces 467D(267Div2-D)Fedor and Essay (排序+dfs)

    D. Fedor and Essay time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. php+redis实现高并发模拟下单、秒杀、抢购操作

    对于高并发下的场景,一般都是采用redis缓存机制来处理. 当然也不是只有redis可以处理.还有利用mysql事务操作锁住操作的行.文件锁. 不过这些方式都没有redis缓存高效.可靠. 模拟的过程 ...

  3. EntityFramework 中的链接研究初探

    很多人用EF的默认链接工厂:System.Data.Entity.Infrastructure.LocalDbConnectionFactory 然后我一开始就不习惯,然后研究了一下,截图如下 然后就 ...

  4. LabVIEW - 破解加密vi

    步骤 使用二进制阅读软件打开加密vi 查找字段"00 00 00 30",其后的16位即可能是密码(可能查找到多个位置带有该字段,只有其中之一为密码位置) 将查找到的密码复制到MD ...

  5. SCUT - 12 - 西方国家 - 矩阵快速幂

    https://scut.online/p/12 可以用矩阵快速幂来做. #include<bits/stdc++.h> using namespace std; typedef long ...

  6. 51nod1282(最小表示法&&枚举)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1282 题意:中文题目诶- 思路:指针不可转,刻盘可转,显然,对 ...

  7. 洛谷P4052 [JSOI2007]文本生成器(AC自动机)

    传送门 好像这题的确只能用AC自动机做了……Aufun大佬太强啦 正着难我们反着做,用总共单词个数减去没有一个单词都不包含的 然后考虑怎么处理一个单词都不包含的,就是跑不到单词的结尾节点 定义$f[i ...

  8. [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)

    目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  9. 剑指Offer的学习笔记(C#篇)-- 从尾到头打印链表

    题目描述 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 一 . 个人想法 这个题目搞了一段时间,因为解法好多,比如:是用递归法呢还是循环呢,要不要使用栈呢等等.. 所以,每一种想法 ...

  10. NOIp知识集合 By cellur925

    基本算法 快速幂 ll ksm(ll a,ll b) { ll ans=; while(b) { ) ans=ans*a%p; b>>=; a=a*a%p; } return ans; } ...