Div 高度为 0 解决方法

div高度是根据里面内容自适应撑开的,如果没有内容高度则为0;但div里面有内容高度仍是0,多半是因为元素浮动引起,div里面的元素浮动到其它地方,div里实际上没有内容,因而为0;

用如下为例: 

<div>
  <a><img></a>
</div>


显示图片后,div高度可能为0,此时可以通过如下3种方式解决掉高度为0:

1. 使用overflow属性:

为div增加样式:

style="overflow:visible"

这样即可撑满div,overflow可以取值:auto 出现滚动条;hidden:超过范围的隐藏(文字会显示不全)


2. 增加div清除浮动:

在被包含的元素下面,此例中为<a></a>下面增加:

<div class="clear"></div>

清除浮动后,<a></a>将落入div中,不再浮动。


3. 使用伪类 after:

/*利用:after伪元素*/ 
div:after { 
  content:""; 
  display: block; 
  clear: both; 
} 


4. 设置 Div overflow:hidden


参考:

https://www.jb51.net/css/74450.html

https://blog.csdn.net/halfsking/article/details/84821459


真诚赞赏,手留余香
赞赏
随机推荐
You Don't Need jQuery
Nodejs连接MySQL
CentOS 添加 Swap 交换文件
filezilla server FTP 安装报错 "could not load TLS network. Aborting start of administration interface"
发送header文件头信息实现文件下载
Git忽略规则.gitignore梳理
javascript中this对象的指向问题
HTTP Authorization 之 Basic Auth
PHP extract() 函数对PHP框架的作用
PHP文件上传进度:使用 Session 的 upload_progress