CSS网页布局入门教程7：二列固定宽度居中
作者:不详 来源:aa25收集 【大 中 小】 浏览: 修改日期：2009-02-17 我要评论(81)
本站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 局中 教程
所属专题：入门教程
相关文章
更多评论(81)..会员评论
- 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
- paul0114(61.62.*.*) 发表于：2010-05-22 02:12:45
- 請問站長我照上面教學作，可是每當#layout插入#left後卻不是在中間而是在左下角 請問我的錯誤在那裏以下是代碼 <style type="text/css"> <!-- #layout { width: 404px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #right { background-color: #F2FDDB; float: left; height: 300px; width: 200px; border: 1px solid #A5CF3D; } #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } --> </style> </head> <body> <div id="layout"> id "layout"</div> <div id="left"> id "left" 的內容放在這裡</div> <div id="right"> id "right" 的內容放在這裡</div> </body> </html> 謝謝回覆
- 管理员回复：如果是点击工具栏上的插入div层按钮的话，请在对话框中选择在内部插入
推荐文章
热门文章
最新图片素材
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)