为什么我的中心 <div> 与我的左 <div> 和右 <div> 不对齐？

Question

我正在尝试将三个 div 放在一起。一个在左边，一个在中间，一个在右边。

但是，我遇到了中间没有正确对齐的问题。

我当前的 HTML 代码：

 <div class="three_contents">
     <div class="left">Left</div>
     <div class="right">Right</div>
     <div class="center">Center</div>
 </div>

我当前的 CSS 代码：

.three_contents{
width: 900px;
border: 0px solid #000;
}

.left{float: left;
margin-top: 25px;
width: 290px;
height: 290px;}

.right{float: right;
margin-top: 25px;
width: 290px;
height: 290px;}

.center{display:block;
margin: 25px auto;
width: 290px;
height: 290px;}

但是，当我在 three_contents div 中添加 1px 边框时，中间的 div 是对齐的。我附上了两张截图，希望有人可以帮助我解决这个问题。非常感谢。

中间 div 不对齐的问题：

我添加1px边框后，中间div对齐：

Answer 1

仅将边距放在中心div。像这样：

.three_contents
{
    width: 900px;
    border: 0;
}

.left
{
    float: left;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

.right
{
    float: right;
    border: solid 1px;
    width: 290px;
    height: 290px;}

.center
{
    margin: 25px auto;
    display:block;
    border: solid 1px;
    width: 290px;
    height: 290px;
}

我做了一个小提琴给你看：http://jsfiddle.net/stakL/1/

编辑：说实话，我也不太明白为什么会发生这种情况。但是我可以看到，在div 的左右两侧设置的margin-top 属性将中间div 的顶部位置作为应用该边距的参考点。

换句话说，中心div距离顶部25px，左右div距离中间div顶部25px。