這些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格擴展到剩餘的線的寬度。如果您在HTML順序中將#right_side放在#center_s以上，它就可以正常工作。

在這裏看到：

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

Answer 2

我很快就砍死這件事。請記住，我是一名開發人員，而不是網頁設計師。

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

Answer 3

因爲中央沒有float和右浮動元素必須首先出現。添加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>