Wie kommt es, dass diese DIVs nicht in der gleichen Zeile angezeigt werden?

Question

Ich habe das folgende HTML:

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

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

Ich erhalte jedoch folgende Meldung:

Das DIV auf der rechten Seite befindet sich in einer separaten Zeile, die pas was ich will. Wie kann ich es auf der gleichen Zeile wie die anderen DIVs bleiben lassen?

Anmerkung: können Sie hier eine Live-Demo sehen und mit dem Code herumspielen: http://jsfiddle.net/UDb4D/

Answer 1

Das liegt daran, dass Ihr #center_s div wird auf die Breite der verbleibenden Zeile erweitert. Wenn Sie #right_side über #center_s in der HTML-Reihenfolge, wird es gut funktionieren.

Siehe hier:

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

Answer 2

Denn die Mitte hat keinen Schwebezustand und Elemente mit rechtem Schwebezustand müssen zuerst erscheinen. hinzufügen float: left; zu Ihrem #center_s oder verschieben Sie die #right_side div, so dass es wie folgt aussieht:

#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

Ich habe das schnell zusammengebastelt. Denken Sie daran, dass ich ein Entwickler bin, nicht ein Web-Designer.

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

Und...

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