实现这个的难点在于如何让他们居中显示。而我们前面的讲过，如果要实现一个div居中，那么只要使用margin:0px auto 就可以实现，那么在实现2个div居中的话，只要把2个div放在那个居中的div里面不就可以了吗？
的确，那么我们来看看：
<style>
#layout{
margin:0px auto;
width:400px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
</style>
</head>
<body>
<div id="layout">
<div id="left">左列</div>
<div id="right">右列</div>
</div>
这样能实现吗？不能，显示叶面中第二个div被挤到下面去了。因为浏览器的盒模型。一个元素的实际占用宽度大小是由padding+margin+width+border来决定的。所以当中间2个div要计算其宽度的时候，应该把分别border的量值计算进来，也就是说应该把#layout地width 改为412px,ok,现在再察看一下吧。
的确，那么我们来看看：
<style>
#layout{
margin:0px auto;
width:400px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:300px;
float:left;
}
</style>
</head>
<body>
<div id="layout">
<div id="left">左列</div>
<div id="right">右列</div>
</div>
这样能实现吗？不能，显示叶面中第二个div被挤到下面去了。因为浏览器的盒模型。一个元素的实际占用宽度大小是由padding+margin+width+border来决定的。所以当中间2个div要计算其宽度的时候，应该把分别border的量值计算进来，也就是说应该把#layout地width 改为412px,ok,现在再察看一下吧。
