div不设置高度背景颜色或外边框不能显示的解决方法
在使用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不设置高度背景颜色或外边框不能显示的解决方法的更多相关文章
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- div 背景色设置_DIV背景颜色设置
DIV 背景色设置篇-div背景颜色设置篇 一.div标签内直接设置背景颜色 - TOP <div style="background:#000; color:#FFF&quo ...
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
在Qt中设置widget背景颜色或者图片方法很多种:重写paintEvent() , 调色板QPalette , 样式表setStyleSheet等等. 但是各种方法都有其注意事项,如果不注意则很容易 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- 【C#/WPF】Button按钮动态设置Background背景颜色
学习笔记: 在XAML中给Button设置颜色大家都懂的,本篇只是记录用C#代码动态生成的按钮设置Background背景颜色. new一个Button,设置Background时可看到该属性类型是S ...
- day42——外键的限制和解决方法、外键的三种约束模式、修改表(单表查询)
day42 外键的限制和解决方法 可以添加外键关联的那个字段可以是 被唯一(unique)约束的字段 或者 主键 限制:+ 由于外键的使用,致使多个表之间产生了联系,当我们对这些表进行更新或删除操作的 ...
- 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 ...
- mysql创建外链失败1005错误解决方法
mysql创建外链失败1005错误解决方法 错误号:1005错误信息:Can't create table 'webDB.#sql-397_61df' (errno: 150)解决方法 错误原因有四: ...
- Foxmail 登录 qq 账号时无法登录 提示我们设置了独立密码或使用授权码登录的解决方法
Foxmail 登录 qq 账号时无法登录 提示我们设置了独立密码或使用授权码登录的解决方法 1.首先我们设置我们邮箱的类型如下图所示 2.打开网页版的qq邮箱 在设置--->账户---&g ...
随机推荐
- CentOS 7紧急救援模式修改root用户密码的方法
最近无聊在网上搜索linux系统root用户密码破解方法,看来很多朋友的博文,同时也试了一下,但是感觉他们写的还是不是很清晰.简洁,因此自己就心血来潮写了这篇博文,提供一个比较清晰的思路给新手,如果有 ...
- Linux网卡配置文件 参数详解
之所以弄这玩意儿是图个清晰方便,最近这段时间弄了好十来次虚拟机网络了ubuntu,centos,rhat7各种折腾,其实把网上各种命令行下的攻略折腾最后关键无非都是对/etc/sysconfig/ne ...
- css中可以继承的属性
声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该 ...
- Spring retry实践
在开发中,重试是一个经常使用的手段.比如MQ发送消息失败,会采取重试手段,比如工程中使用RPC请求外部服务,可能因为网络波动出现超时而采取重试手段......可以看见重试操作是非常常见的一种处理问题, ...
- 十个常见的Java异常出现原因
异常是 Java 程序中经常遇到的问题,我想每一个 Java 程序员都讨厌异常,一 个异常就是一个 BUG,就要花很多时间来定位异常问题. 1.NullPointerException 空指针异常,操 ...
- docker inspect获取详细参数的两种方法
docker inspect xx 返回的是一个json格式的数据 以下为部分返回值 [ { "Id": "706813b0da107c4d43c61e3db9da908 ...
- ImageMagick命令执行学习笔记(常见于图片预览处)
实验版本: ImageMagick版本:6.9.2 push graphic-context viewbox 0 0 640 480 fill 'url(https://"|whoami&q ...
- 20155218 2006-2007-2 《Java程序设计》第3周学习总结
20155218 2006-2007-2 <Java程序设计>第3周学习总结 教材学习内容总结 ==使用在比较两个参考名称是否参考同一对象:equals()比较实质是否相同. 看见new关 ...
- 20155220 2016-2017-2《Java程序设计》第五周学习总结
20155220 2016-2017-2<Java程序设计>第五周学习总结 教材学习内容总结 异常处理 Java异常处理通过5个关键字try.catch.throw.throws.fina ...
- 20145226夏艺华 《Java程序设计》预备作业3
安装虚拟机 上学期开学的时候就安装了Linux虚拟机,由于我的是Mac OS,所以和windows下的安装有所不同. 我使用的是VirtualBoxVM虚拟机,稳定性还不错,需要的同学可以从https ...