关注前端开发微信微信号web007007

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

作者 管理员 发布时间 2012-05-31 01:47 文章分类 DIV&CSS 文章评论 抢沙发 阅读次数

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


<!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>二列固定宽度居中——AA25.CN</title>
<style type="text/css">
<!--
#layout {
 width: 404px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
}
#left {
 background-color: #E8F5FE;
 border: 1px solid #A9C9E2;
 float: left;
 height: 300px;
 width: 200px;
}
#right {
 background-color: #F2FDDB;
 border: 1px solid #A5CF3D;
 float: left;
 height: 300px;
 width: 200px;
}
-->
</style>
</head>

<body>
<div id="layout">
 <div id="left">左列</div>
 <div id="right">右列</div>
</div>
</body>
</html>

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

本文固定链接: http://www.web92.net/58.html | WEB前端开发

该日志由 于2012年05月31日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: CSS网页布局入门教程7:二列固定宽度居中 | WEB前端开发