为什么我的中心<div>与我的左<div>和右<div>没有对齐？</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/

编辑：为了真诚，我也不太明白为什么它会发生。但我可以看到左侧和右侧margin-top设置的div属性将中间div的顶部位置作为应用该边距的参考点。

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