当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程7:二列固定宽度居中

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2009-02-17 我要评论(82)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

在一列固定宽度之中,我们使用margin:0px auto;这样的设置,使一个div得以达到居中显示,而二列分栏中,需要控制的是左分栏的左边与右分栏的右边相等,因此使用margi:0px auto;似乎不能够达到这样的效果,这时就需要进行div的嵌套式设计来完成了,可以使用一个居中的div作为容器,将二列分栏的两个div放置在容器中,从而实现二列的居中显示,结合上面的代码,新的XHTML代码结构如下:

 


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

#layout有了居中的属性,自然里边的内容也能够做到居中,这里的问题在于#layout的宽度定义,将#layout的宽度设定为404px,因为在上一个教程中了解过,一个对象真正的宽度是由它的各种属性相加而成,而left的宽度为200px,但左右都有1px的边距,因此实际宽度是202px,right对象同样如此,为了让layout作为容器能够装下它们两个,宽度则变为了left和right的实际宽度和,便设定为了404px,这样,就实现了二列居中显示。
二列宽度居中在实际网站上应用是非常广泛。
 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: div 局中 教程

所属专题:入门教程

更多评论(82)..会员评论

dustxie(124.89.*.*) 发表于:2013-04-19 17:15:49
为什么layout代码都正确了,但是没有居中属性呢?
horkings(124.207.*.*) 发表于:2010-12-23 14:22:26
OK ,麻烦站长了。问题解决了。
horkings(124.207.*.*) 发表于:2010-12-23 14:04:10
站长:首先,我是个菜鸟。问下您,怎么才能把#left和#right放到#layout内部啊,只能是记住站长上边的代码么?还是能像“一列固定宽度”那样通过鼠标点击将他们放进去。谢谢。
管理员回复:光标在源代码视图里定位到layout里边,然后再插入就是里边了
sisixh2000(125.90.*.*) 发表于:2010-11-21 22:19:23
只想说一句话:管理员真的是个好人
管理员回复:谢谢啊,欢迎常来
lpbottle(221.221.*.*) 发表于:2010-07-16 12:04:15
我总觉得这里的设置是在追求“完美”,刚刚好,我把宽度改成100以后就不居中了,有没有什么办法可以让宽度任意改变之后还能居中呢?
管理员回复:用表格吧
ping791020(123.15.*.*) 发表于:2010-07-08 11:49:47
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #zong { height: 600px; width: 600px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #zuo { height: 300px; width: 300px; } #you { height: 300px; width: 300px; } --> </style> </head> <body> <div id="zuo">此处显示 id "zuo" 的内容</div> <div id="you">此处显示 id "you" 的内容</div> <div id="zong">此处显示 id "zong" 的内容</div> </body> </html> 老师帮忙看下,怎么都跑到左侧外边了。
管理员回复:请对照本教程中的源代码查找原因
Jzh(116.11.*.*) 发表于:2010-06-27 02:15:08
第一个插入 Div标签 插入里选:插入点 第二个插入Left标签 选:在开始标签之后,右边选<Div id="layout"> 表示在上一个标签开始和结束之间插入 第三个插入 Right标签 选:在标签之后,右边选<Div id="Left">表示为在上一个标签的后面插入 我是这样理解的
管理员回复:多试试,只要能插入到正确位置就行了
zch(111.120.*.*) 发表于:2010-06-17 10:44:34
margin-right: auto;中的auto就可以居中吗?
管理员回复:还有左侧也设成auto

出差旅游免费预订酒店

【视频教程】新手常见问题