html高度为零,html中父div高度为0的原因

问题：

在chrome中看到父div高度为0，但里面明明有内容。

原因：

简单的讲原因就是子元素如果设了float属性，这些子元素就脱离了父div容器的控制，所以父容器认为里面没内容，高度自然变成了0.

解决办法：

1、在子div最后添加了个专门用户清除浮动的div，如

2、在父div里添加样式：

overflow:hidden;

3、不要用浮动，子元素使用display:inline-table或者display:inline-block

DEMO:

.main{padding:10px;font-size:24px;width:480px;}

.header{margin-bottom: 10px;overflow: hidden;}

.header .left{float:left;width:50%;}

.header .right{float:left;width:50%;}

.list{clear:both;overflow: hidden;}

.list .col1{float:left;width:10px;background-color: #0000FF;}

.list .col2{float:left;width:24%;background-color: #26C1FE;}

.list .col3{float:left;width:24%;background-color: #E58484;}

.list .col4{float:left;background-color: #0000FF;}

2015-10-22

+12.00

avatar

nickname

status:

修改一行最后一个元素的样式

$('#ul li:nth-child(3n)').css('color','red');

html高度为零,html中父div高度为0的原因相关推荐

html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
父div高度和宽度的应用
这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正. 首先是对齐问题,可以把父div的高度设置为0,然后调整padding值,这样可以批量调整子div们和其他父div的相对高度. 这 ...
html body最小高度,CSS网页布局中的最小高度问题的解决方法
假定有二个BOX,我们需要它的最小高度为150PX. CSS 复制代码代码如下: div.box1,div.box2{ width: 300px; min-height: 150px; backgro ...
HTML/CSS中，DIV高度自适应的解决方法
在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变. 这里我就列举两种情况: ① 顶部为一排菜单栏,下部为内容部.其中,要求,菜单栏高度固定,内容部随着浏览器窗口大小的改变而改变, ...
关于flex布局中,父元素高度auto，由一子元素撑开，另一子元素自适应高度问题
.expressRecord-single-close {//父元素样式 width: 100%; height: auto; display: flex; justify-content: flex ...
子元素div高度不确定时父div高度如何自适应
<br style="clear:both;" /> 转载于:https://www.cnblogs.com/lxthyme/p/5157950.html
html三个div相同高度,两个DIV高度自适应方法(左右两个DIV高度一样)
html: aaaa aaaa bbb 1.使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用#container{width:500px; display: ta ...
js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高
1. 需求实现父 div 里面左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) . 2. 实现原理 2.1 父布局 <div class='hj-wr ...

html高度为零,html中父div高度为0的原因

html高度为零,html中父div高度为0的原因相关推荐

最新文章

热门文章