说来惭愧,走上程序猿这条不归路已经一年了,却连自己的博客都没有。看到道上有脸面的大神博客都做得贼漂亮~~于是,按捺不住了~~

今天终于开通了博客园博客,正式开始我的博客人生啦!!!~~吼吼~~

废话少说,说正事。今天工作中碰到了两个小问题,是关于div背景色显示的。按照正常的学术流程,应该分为如下描述:what——why——how

问题现场还原如下:

  1. 在一行中排列三个div,分别用了左浮动和右浮动属性,其父div的背景色却羞羞答答始终不愿意出现,这是什么鬼?

原因: 由于产生了浮动,导致外层div撑不开,所以背景色不显示。

解决: 在外层div上加上清除浮动。或者,对css用overflow:hidden。

HTML代码:

<div class="parent">
<div class="fl"> 左</div>
<div class="fl"> 右</div>
<div class="fr"> 左</div>
</div>

CSS代码:

 .fl{
float: left;
}
.fr{
float: right;
}
.parent{
clear: both; /*清除浮动*/
overflow:hidden;
}

关键点:一定是对父div进行清除浮动操作,才能解决问题。

至此,问题解决。但是有一点小疑问:

overflow:hidden是将超出的部分隐藏,为什么此处对浮动致使背景不显示会有影响?    此处留白,请求大神求解。

2. 对同一个div,可以即设置背景图片又设置背景色吗?

我看到网上说可以同时设置并可以实现效果。我的需求是背景色为白色,背景图片仅仅置于div底部一小块。尝试之下,发现未能实习效果。

解决方法:在外层再套一层div,给外层的div设置背景图片,内层div设置背景色。

至此,问题解决。也许解决方案不是最优的,期待大神指点。

影响div背景色显示的问题的更多相关文章

  1. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. div中显示页面

    在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式. <script type="text/javascript"> ...

  3. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  4. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  5. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  6. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  7. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  8. div 背景色设置_DIV背景颜色设置

    DIV 背景色设置篇-div背景颜色设置篇 一.div标签内直接设置背景颜色   -   TOP <div style="background:#000; color:#FFF&quo ...

  9. (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

随机推荐

  1. Request 请求页面的地址路径获取

    Request.ApplicationPath: /testweb Request.CurrentExecutionFilePath: /testweb/default.aspx Request.Fi ...

  2. EXCEL里面的数字显示为文本 不用科学计数法显示

    1. 在输入这一串数字前加撇号“'”(英文状态下的单引号)即可.2. 先将这一列设置为“文本”格式,然后直接输入这一串数字即可.   已经输入好了数字,那估计你这些数字的后三位都已经全变成“0”了,用 ...

  3. 数论学习笔记之解线性方程 a*x + b*y = gcd(a,b)

    ~>>_<<~ 咳咳!!!今天写此笔记,以防他日老年痴呆后不会解方程了!!! Begin ! ~1~, 首先呢,就看到了一个 gcd(a,b),这是什么鬼玩意呢?什么鬼玩意并不 ...

  4. 数据导出到excel

    jsp页面: 数据table: <form action="/export.jsp" method="post" id="expform&quo ...

  5. python基础之内置函数

    该博客内容参考http://www.cnblogs.com/wupeiqi/articles/4943406.html 内置函数 一 详细见python文档,猛击这里 文件操作 操作文件时,一般需要经 ...

  6. android.app.Activity阅读摘要,有时候会不会需要保持一些现场数据呢? 想让系统帮你退出到后台或者挂掉前做些前置保持工作吗,重点参考吧:

    * * @param savedInstanceState If the activity is being re-initialized after * previously being shut ...

  7. Session Tracking Approaches

    cookies url rewriting hidden field see also: http://www.informit.com/articles/article.aspx?p=29817&a ...

  8. sshd 指定端口,指定秘钥文件

     scp -i ~/test -P22219 SRC/ root@10.2.227.76:/data/ #sshd的端口指定的是22219,  -i 指定秘钥文件   指定秘钥文件需要注意的是,需要提 ...

  9. 解决php deprecated 的问题

    Deprecated :意思是“不推荐” php 5.3 从一方面来讲,可以说在07年计划PHP6的中的一个pre版本,增加了很多功能,统一了很多语法,使PHP变得更加强大与简洁. 说到统计架构规划, ...

  10. [C++] 自己实现快速memcpy

    仅在Win32上使用,Win64上不允许内嵌汇编= = __declspec(naked) void* __stdcall __memcpy ( __in void* Dest, // ebp+0x0 ...