第次尝试进行两栏式页面布局计划

!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\"

html xmlns=\"\"

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;

}

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

查看本文来源