在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题。

大体结构
<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>
css文件:(只写出了最主要的部分css代码:定义了最外层div的背景颜色和边框,同时定义了里面的div是浮动的)
.outer{border:#F00 1px solid; background:#FF9 repeat;}
.inner1,.inner2{float:left;}

所以出现这种问题有两个前提:1.外部div没有设置高度;2. 内部div是浮动的(带有float属性)。

解决方法:
给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
方法一:
在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
  <div style="clear:both;"></div>
</div>
方法二:
在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的)
overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。

div不设置高度背景颜色或外边框不能显示的解决方法的更多相关文章

  1. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

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

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

  3. Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())

    在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

  5. 【C#/WPF】Button按钮动态设置Background背景颜色

    学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...

  6. day42——外键的限制和解决方法、外键的三种约束模式、修改表(单表查询)

    day42 外键的限制和解决方法 可以添加外键关联的那个字段可以是 被唯一(unique)约束的字段 或者 主键 限制:+ 由于外键的使用,致使多个表之间产生了联系,当我们对这些表进行更新或删除操作的 ...

  7. yum安装命令:遇到的问题报错如下: File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: 通过看报错可以了解到是使用了python2的语法,所以了解到当前yum使用的Python2,因为我单独安装了python3,且python3设置为默认版本了,所以导致语法问题 解决方法: 使用python2.6 yum install

    1.安装zip yum install -y unzip zip 2.安装lrszs yum -y install lrzsz 3.安装scp 遇到下面的问题: 结果提示: No package sc ...

  8. mysql创建外链失败1005错误解决方法

    mysql创建外链失败1005错误解决方法 错误号:1005错误信息:Can't create table 'webDB.#sql-397_61df' (errno: 150)解决方法 错误原因有四: ...

  9. Foxmail 登录 qq 账号时无法登录 提示我们设置了独立密码或使用授权码登录的解决方法

    Foxmail 登录 qq 账号时无法登录  提示我们设置了独立密码或使用授权码登录的解决方法 1.首先我们设置我们邮箱的类型如下图所示 2.打开网页版的qq邮箱  在设置--->账户---&g ...

随机推荐

  1. HDU 1142 A Walk Through the Forest(最短路+记忆化搜索)

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  2. cocos2d-x开发: 一切应该从配置文件读取开始

    想要做一款完整的游戏,应该从配置文件读取开始.cocos2d-x本身提供了UserDefault来操作xml格式的配置文件,准确的说配置这模块引擎开发者已经考虑到了.但是xml格式包含大量无关的格式信 ...

  3. svn 提交报错post-commit hook failed (exit code 23) with output

    svn 提交文件,hook同步更新报权限错误 排查后可能原因是被同步的服务器 selinux 已开启. 查看状态命令:/usr/sbin/sestatus -v  #如果SELinux status参 ...

  4. Knowledge Point 20180506 深究Java的跨平台特性

    本章主题:从骨子里看Java的跨平台;本文内容部分摘自https://www.cnblogs.com/roger-yu/p/5827452.html 有过基础Java知识的开发人员都知道Java是跨平 ...

  5. 关于keil不同容量和不同引脚大小的编译以及下载出错问题

    如果遇到这个问题一般可能有四个原因(以STM32F103C8T6为例) 1.芯片型号没有选对 2.startup文件可能没有选对,startup文件常用的分为3种,startup_stm32f10x_ ...

  6. 编程开发之--Oracle数据库--存储过程和存储函数(2)

    上一小结我们简单介绍了存储过程和存储函数,对存储过程和存储函数有了一个基本的了解,接下来介绍在java程序中如何调用我们创建的存储过程和存储函数 1.在应用程序中调用我们的存储过程 创建一个简单的Ja ...

  7. Unity 4.7 导出工程在XCode10.1上编译报错

    Unity 4.7 导出工程在XCode 10.1上编译报错,而在XCode 9.3上是可以正常编译运行的.原因是Unity4.7所依赖的头文件和库文件在XCode10上没有了,解决办法如下,把XCo ...

  8. Request和Response中文乱码问题的解决方案和区分

    首先,在刚接触这个中文乱码问题的时候,还是比较混乱的,因为针对request和response各自都有自己的解决方案,而且思路相似,方法也很相似,又针对get和post两种提交方式,分两种解决中文乱码 ...

  9. swiper插件几个容易忽略的地方

    以下内容为swiper4版本的 1.在我们用swiper插件做轮播的当我们左右滑动后会出现自动轮播停止了 此时我们需要在autoplay中 加上这个属性 autoplay:{ delay:1000, ...

  10. html input file accept

    *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video*.ac3 audio/ac3 AC3 Audio*.asf allpication/vnd.ms-asf ...