为什么这些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_s div扩展到剩余行的宽度。如果您将#right_side放在HTML订单的#center_s之上，它就可以正常工作。

见这里：

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

Answer 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>

Answer 3

我很快就把它搞砸了。请记住，我是开发人员，而不是网页设计师。

<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;
}