第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题

原创 2007年10月07日 23:06:00

<!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>
<style type="text/css">
    *{
 margin:0px;
 padding:0px;
 }
    #top-right {
 /*margin-right:-3px;*/
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 float:left;
 }
    #top-left {
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 }
    #content {
 width:120px;
 border:40px solid #f3c3f3;
 padding:80px;
 }
</style>
</head>
<body>
<div id="top-right">aaa</div>
<div id="top-left">aaa</div>
<div id="content">bbb</div>
</body>
</html> 

用IE浏览器打开上面的网页文档,发现上面的左右两个div块并没有紧密相邻,而是中间有个3px的缝隙,去掉css中的那条注释语句,问题就解决了。

在css中加上如下的语句 :
body {
 width:360px;
 margin:0px auto;
 }

可以实现两栏的自动居中,且不受浏览器改变大小的影响。

相关文章推荐

jQuery+css3实现3D翻书页面布局效果

  • 2013年09月18日 11:30
  • 556KB
  • 下载

简单HTML5+CSS3页面布局

  • 2016年01月22日 17:30
  • 68KB
  • 下载

DIV+CSS基础教程:浮动(float)页面布局

【第一步 整体布局与公共CSS定义】 我们先来分析一下这个页面 页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,如下图 ...

DIV+CSS页面布局练习

body{text-align:center;} div.qq{width:960px;height:1500px;background:yellow;margin:0 auto;text-al...

使用Div和CSS来排版页面布局

1.这里的div并不是我们所说的层,虽然他们的标签都是,在这里你可以把div理 解成一个容器,它可以放文字,图片,表格等等.      2.用div布局必须对页面的结构进行准确的分析,当然用tab...

页面布局的理解【div+css】

一说界面的布局不的不提一下跨浏览器的问题,不同的内核对css的解析不一样,如:在ie、firefox和google浏览器下对像素的识别就不一样,1px在这三个浏览器下的大小是不一样的。这是非常让人头大...

div+css实战演练---优酷盒子模型和搜狐首页面布局效果

div+css实战演练---优酷盒子模型和新浪首页面布局效果 说明:为了加强div+css的训练,这里列举了两个实例(未涉及asp、php内容),优酷盒子模型和搜狐首页面的布局。实现方式因人而异...

html5+css3页面布局

  • 2016年08月23日 11:55
  • 2KB
  • 下载

[DIV/CSS] CSS页面布局笔记

居中布局 水平居中 父元素和子元素的宽度都未知 inline-block + text-ailgn .child{display:inline-block;} .paren...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
举报原因:
原因补充:

(最多只允许输入30个字)