火狐浏览器与谷歌浏览器网页三列布局的兼容实现

三栏布局是目前最常见的网页布局之一,主要页内容放在中间一栏,边上的两栏放置导航链接、小工具之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。

火狐浏览器和谷歌浏览器在代码编写上略有不同,谷歌能够兼容多种方式,而火狐却要严格按照规则来写。

HTML代码如下:

<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

谷歌css代码一

#main{width:900px;height:500px;}#left{width:300px;float:left;display:inline-block;}#left{width:300px;float:left;display:inline-block;}#left{width:300px;float:right;display:inline-block;}

谷歌css代码二

#main{width:900px;height:500px;}#left{width:300px;float:left;}#left{width:300px;float:left;}#left{width:300px;float:right;}

谷歌css代码三

#main{width:900px;height:500px;}#left{width:300px;float:left;}#left{width:300px;display:inline-block;}#left{width:300px;float:right;}

 

经过测试代码二三支持火狐的,如果写成代码一,火狐浏览器会出现排版错误。

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

标签:

分享到:

扫一扫在手机阅读

扫一扫 在手机阅读、分享本文

上一篇:多说评论圆角CSS样式美化版分享 下一篇:九封写给自己的情书制作的404页面
全部回复0人评论0人参与

电子邮件地址不会被公开。 必填项已用*标注

loading