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
;
}
區別就在這一句
查看全文
相关阅读:
种类并查集
因式分解
最长递增(不减)子序列
C++之算法题模板
线段树
C++之环境搭建
C++之vector用法
逆序数以及右边更小数的个数
Unity3d之动态连接Mesh Renderer和Collider
Matlab之字符串处理
原文地址:https://www.cnblogs.com/ywkpl/p/1224555.html
最新文章
linux学习:进程间通信—管道
flush priviliege
轻快的VIM(三):删除
git fatal: 拒绝合并无关的历史的错误解决
is(':checked'); 判断radio是否选中,该属性会随着radio被切换点击而变化
each jquery
tp查找某字段,排除某字段,不用一次写那么多
js获取当前页面的参数,带完善~~~
radio is checked
floor ceil
热门文章
三级联动
AngularJS radio绑定与取值
AngularJS 服务(Service)
AngularJS 过滤器
AngularJS Scope(作用域)
AngularJS 简介
js 动态生成button 并设置click事件
js的一些写法问题
刷新页面的几种方式
区别JS和DOM对象
Copyright © 2011-2022 走看看