为什么这些div不会显示在同一行上?

因为你的 #center_s div扩展到剩余行的宽度。如果你把 #right_side #中心区 按照HTML的顺序,它可以正常工作。

请看这里:

http://jsfiddle.net/UDb4D/2/

float: left; 给你的 #center_s #right_side 前面的div看起来是这样的:

#root {
    background-color: #eee;
}

#left_side {
    float: left;
}

#center_s {
    margin-left: auto;
    margin-right: auto;
    width: 65px;
    background-color: #ccc;
    float: left;
}

#right_side {
    float: right;
}

<div id="root">
    <div id="right_side">RIGHT</div>
    <div id="left_side">LEFT</div>
    <div id="center_s">CENTER</div>    
</div>

我很快就把它砍掉了。我是个开发者,不是网页设计师。

<div id="root" align="center">
    <div id="right_side">RIGHT</div>
    <div id="center_s">CENTER</div>
    <div id="left_side">LEFT</div>
</div>

还有。。。

#root {
    background-color: #eee;
}

#left_side {
    display: inline;
    float: left;
}

#center_s {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 65px;
    background-color: #ccc;
}

#right_side {
    display: inline;
    float: right;
}