为什么这些DIV不会显示在同一条线上？

Question

我有以下HTML:

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

......和CSS:

#root {
    background-color: #eee;
}

#left_side {
    float: left;
}

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

#right_side {
    float: right;
}

但是,我得到以下内容:

右边的DIV在一条单独的线上,这不是我想要的.如何让它与其他DIV保持同一条线？

注意:您可以在这里看到现场演示并使用代码:http://jsfiddle.net/UDb4D/

Answer 1

这是因为你的#center_sdiv扩展到剩余线的宽度.如果你把#right_side上面#center_s的HTML命令放在上面,它就可以了.

看这里:

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