今天来学习CSS网页结构进门教程7：二列流动宽度居中

显示全部楼层 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

增加了开发风险，一个CSS文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
在一列流动宽度当中，我们利用margin:0pxauto;如许的设置，使一个div得以到达居中显现，而二列分栏中，必要把持的是左分栏的右边与右分栏的右侧相称，因而利用margi:0pxauto;仿佛不克不及够到达如许的效果，这时候就必要举行div的嵌套式计划来完成了，可使用一个居中的div作为容器，将二列分栏的两个div安排在容器中，从而完成二列的居中显现，分离下面的代码，新的XHTML代码布局以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>二列流动宽度居中——AA25.CN</title><styletype="text/css"></style></head><body><divid="layout"><divid="left">左列</div><divid="right">右列</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
#layout有了居中的属性，天然里边的内容也可以做到居中，这里的成绩在于#layout的宽度界说，将#layout的宽度设定为404px，由于在上一个教程中懂得过，一个工具真实的宽度是由它的各类属性相加而成，而left的宽度为200px，但摆布都有1px的边距，因而实践宽度是202px，right工具一样云云，为了让layout作为容器可以装下它们两个,宽度则变成了left和right的实践宽度和，便设定为了404px，如许，就完成了二列居中显现。
二列宽度居中在实践网站上使用长短常普遍。

课余，我们也思考过为什么要学习并使用div+css，而不是如何实现某个细节。当然我们也不应当为了Div+css而Div+css。这样做毫无意义。而以下两点是我们总结了的它不得不说的好：

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习CSS网页结构进门教程7：二列流动宽度居中

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块