为什么这些资料核实将不会显示在同一行？ [英] How come these DIVs will not display on the same line?

问题描述

我有以下HTML：

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

...和CSS：

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

不过，我得到如下：

However, I get the following:

右边的DIV是在一个单独的线，这是不可以我想要什么。我怎样才能使它留在同一条线上的其他的DIV？

The DIV on the right is on a separate line, which is not what I want. How can I make it stay on the same line as the other DIVs?

注意：你可以看到一个现场演示和玩的code在这里：的 http://jsfiddle.net/UDb4D/

Note: you can see a live demo and play around with the code here: http://jsfiddle.net/UDb4D/

推荐答案

这是因为你的 #center_s DIV扩展到剩余的线的宽度。如果你把 #right_side 上方 #center_s 在HTML命令，它会正常工作。

It's because your #center_s div expands to the width of the remaining line. If you put #right_side above #center_s in the HTML order, it'll work fine.

下面参见：

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

这篇关于为什么这些资料核实将不会显示在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！