2 gotobat gotobat 于 2017.01.15 13:50 提问

为何我的DIV模块显示不出颜色

![图片说明](https://img-ask.csdn.net/upload/201701/15/1484459411_881740.jpg)图片说明
最后一个DIV模块,仅仅显示字符,其余属性都未显示

5个回答

showbo
showbo   Ds   Rxr 2017.01.15 14:37
已采纳

content要清除浮动,要不后续的div会顶上去了

 <div id="content" style="zoom:1;overflow:hidden">
gotobat
gotobat   2017.01.15 13:47

图片说明

Andone_hsx
Andone_hsx   2017.01.15 17:21

原因:很简单!当 id =“content”的div里面的三个div(也就是id为content的div的子元素)浮动,其元素没有高度,最后一个div向前占位,
不过被浮动的三div给挡住了。解决这种情况的方法有很多种
方法1:你可以在id为content的div的最后一个子元素后面加一个空子元素;
<!doctype html>



test


头部





<!-- 增加空子元素 -->


xia



```![图片说明](https://img-ask.csdn.net/upload/201701/15/1484471614_448616.png)


方法2:给id为content的div加上overflow:hidden;
<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content" style="overflow:hidden;">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>




方法3:使用伪元素选择器:after
<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
            <style>
                .clear:after{
                    content:"";
                    display:block;
                    clear:both;
                }
            </style>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content" class="clear">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>





Andone_hsx
Andone_hsx   2017.01.15 17:24

方法1:你可以在id为content的div的最后一个子元素后面加一个空子元素;
<!doctype html>



test


头部





<!-- 增加空子元素 -->


xia



Andone_hsx
Andone_hsx   2017.01.15 17:25
 <!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <title>test</title>
     </head>
     <body>
        <div style="background:blue;height:100px;">头部</div>
        <div id="content">
            <div style="width:33%;height:250px;float:right;background:green;"></div>
            <div style="width:33%;height:250px;float:left;background:red;"></div>
            <div style="width:33%;height:250px;float:left;background:black;"></div>
            <!-- 增加空子元素 -->
            <div style="clear:both;"></div>
        </div>
        <div style="background:red;height:250px;">xia</div>
     </body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
div背景图片或颜色不显示的解决办法
div背景图片或颜色不显示的解决办法背景图片不显示的原因主要有以下几个方面:css没有被调用 css图片地址不对 div的高度没有固定,是auto、没有设值或者高度不够 div被嵌套 div代码不规范解决办法:DIV高度为自动,背景颜色无法显示,在代码中将原代码height:auto; 改为height:100%; overflow:hidden;!important;同时还可以兼容 IE6、7、8
HTML5 - div 背景颜色 和 隐藏、显示 属性
HTML51. 修改背景颜色//"a" 是 id document.getElementById('a').style.backgroundColor="#FF0000";
highcharts显示问题
做的项目中有一个需求是鼠标悬浮到元素上显示highcharts的内容,但是highcharts的容器(即画highcharts的div)在初始化highcharts后隐藏再显示时,highcharts图表的显示会出现问题。 如果再容器显示后再初始化highcharts是不会出现这个问题的,但是我的容器中保存的始终是同一个highcharts图表,所以没有必要多次请求数据(如果悬浮在不同的元素上显
JavaScript实现同一页面不同div的切换及颜色改变
类似于csdn个人信息页面,先上图刚进入页面后,“我的相册”对应的区块会显示深红色,并且会显示相应的div内容。然后当我们点击“我的关系后”,“我的关系”的背景色变成深红色,其他导航背景色是灰色,并且下面对应的div也发生了变化。html代码<nav> <ul> <li class="special"><a href="#album">我的相册</a></li>
folium遇到的坑 不显示颜色
三个坑: 居然不显示分层的颜色(heatmap)很坑啊,网上查了很多资料,发现新版的folium的geo_json换了方法成了choropleth 还有一个坑 feature.id 这里 feature必须是第一个参数。 最后一个坑 su_lt_two['Zip']=su_lt_two['Zip'].astype(str) 读取csv时,例如‘Zip’字段的类型必须与geojson
鼠标跟随效果
鼠标移动后面跟着显示不同颜色的div
css --关于背景图片显示不出来的情况
关于背景图片,有些时候它可以正常地显示出来,但是有时候它却不可以,那究竟是什么原因呢?今天 我就是碰到了这个问题。 解决这个问题之前我们首先应该知道块级元素和行内元素,块级元素一般来说是可以设置宽和高的以及 其他的属性等等,但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型 ,每一个元素都有自己的默认的类型。 接下来我们给出代码:看这里
HelloWorld模块加载--驱动
#include #include MODULE_LICENSE("Dual BSD/GPL"); static int hello_init(void) { printk(KERN_ALERT "Hello, world\n"); } static void
div background 不显示
div background 不显示
div没有设置高度,背景颜色却无法显示
在设计网页时,设置了div为自动高度或不给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7,8却不显示。 解决办法如下: 1、把 height:auto; 改成 height:100%; overflow:hidden;  原理:IE6可以再不给高度的情况下自动识别div高度而IE7,8需要指定高度 如果上述方法不行还有一种办法 2、在div的