第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;
 }

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

去除inline-block元素间间距的N种方法

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~ 我们使用CSS更改非inline-block水...
  • xiebaochun
  • xiebaochun
  • 2014年09月10日 10:55
  • 10334

CSS实现网页布局(一列,两列,三列)

1.一列布局(又叫单列布局) body{margin:0;padding:0;} .head{heigth:200px;background:blue;} .main{heig...
  • Bazingaea
  • Bazingaea
  • 2016年03月13日 21:35
  • 3113

easyui 初始加载时页面样式乱的解决方法

easyui 初始加载时页面样式乱的解决方法
  • wyljz
  • wyljz
  • 2016年04月15日 17:45
  • 4556

DIV+CSS页面布局中注意的问题以及常用的CSS使用方法

本文假定你了解基本的DIV+CSS知识. DIV布局整理: 1、对于布局要使用DIV+CSS,使页面中的结构与表现完全分离,结构位于html文件中,表现位于css文件中 2、对于要显示数据,...
  • kyleing
  • kyleing
  • 2013年04月22日 14:32
  • 531

div+css三栏式布局

最近组队报名参加了百度前端技术学院,里面有针对学习前端各个不同阶段的任务,然后在git上推送自己写的任务代码,也可以查看别人的代码,通过这种方式来相互学习。然后我选了几个任务,其中就有一个是div+c...
  • xiaoxixi_blog
  • xiaoxixi_blog
  • 2016年03月19日 01:04
  • 501

HTML5+CSS3基础响应式页面布局

随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果。此时,一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利。因此学习响...
  • liuyingv8
  • liuyingv8
  • 2018年01月08日 18:20
  • 92

div+css 三栏式布局

1,效果图 2,方法一 三栏式布局 .main{ background-color: #22bd7a; margin:0...
  • Sukla
  • Sukla
  • 2017年12月15日 21:44
  • 32

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

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

简单HTML5+CSS3页面布局

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

html5+css3页面布局

  • 2016年08月23日 11:55
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
举报原因:
原因补充:

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