zoukankan
html css js c++ java
css外容器margin問題[IE中height:100%]
常用的二列布局,外容器Div定義class為container, 包含class分別為left 和main兩個子DIV,下邊是class為foot的Div
當我們想在container和foot之間加一點間隙時,fifefox卻發起了脾氣
代碼如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
<
title
>
測試頁
</
title
>
<
style
type
="text/css"
>
.container
{
}
{
border
:
1px #333 solid
;
width
:
600px
;
margin-bottom
:
20px
;
}
.container .left
{
}
{
width
:
300px
;
float
:
left
;
height
:
100px
;
background
:
#f60
;
}
.container .right
{
}
{
width
:
300px
;
float
:
left
;
height
:
300px
;
background
:
#ccc
;
}
.foot
{
}
{
clear
:
both
;
width
:
600px
;
height
:
20px
;
background
:
#3D78B6
;
border
:
1px solid #000000
;
}
</
style
>
</
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="left"
></
div
>
<
div
class
="right"
></
div
>
</
div
>
<
div
class
="foot"
></
div
>
</
body
>
</
html
>
以上代碼在IE6中能正常顯示,但是在firefox中container和footer之間沒有間隙,也就是說margin-bottom:20沒起作用
解決變法:
修改container,代碼如下:
.container
{
}
{
overflow
:
hidden
;
border
:
1px #333 solid
;
width
:
600px
;
margin-bottom
:
20px
;
}
區別就在這一句
查看全文
相关阅读:
Django学习:博客分类统计(14)
Django学习:上下篇博客和按日期分类(13)
Django学习:分页优化(12)
Django学习:shell命令行模式以及分页(11)
Django学习:博客页面的响应式布局(10)
Django学习:响应式导航条(9)
八、Django学习:使用css美化页面
七、Django学习:模板嵌套
js日期使用总结
Vue 的数据劫持 + 发布订阅
原文地址:https://www.cnblogs.com/ywkpl/p/1224555.html
最新文章
Dubbo-Zookeeper订阅
Dubbo原理
Sentinel-Node分析及调用链
JDK7-try-with-resources
Docker-搭建Nacos集群(docker-compose方式)
Docker-K8s-Minikube方式创建集群
Docker-Swarm集群
Docker-扩展服务
jquery 整理笔记(一)
学会读JQuery等JS插件源码
热门文章
javascript笔记(二)
javascript笔记(一)
JavaScript中url 传递参数(特殊字符)解决方法及转码解码的介绍
无题
宽度显示banner
一些比较实用的javascript方法收集,留着有用
一篇 jQuery 常用方法及函数的文章留存备忘。
JQuery表单验证插件EasyValidator
Django学习:博客阅读计数统计(16)
Django学习:使用富文本编辑器(15)
Copyright © 2011-2022 走看看