CSS左对齐，右对齐，重复对齐

Question

左边和右边有一个.png，第三个窗口宽度（未知）宽度重复。

＆＃13;

＆＃13;

#wrap{
    width: 100%;
    height: 10px;
}
#a{
    float: left;
    background-color: #800000;
    width: 10px;
    height: 10px;
}
#b{
    background-color: #008000;
    margin-left: 10px;
    margin-right: 10px;
    height: 10px;
}
#c{
    float: right;
    background-color: #000080;
    width: 10px;
    height: 10px;
}

＆＃13;

<div id="wrap">
    <div id="a">
    </div>
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

像这样，float: right元素就在第二行，就像它一样。

如果我将display: inline（或〜-block）添加到中间元素，它就不会显示，但左/右都可以。

出了什么问题？

Answer 1

你可以试试这个，我重新安排了html

http://jsfiddle.net/sKqZJ/128/

<div id="wrap">
    <div id="a"></div>
    <div id="c"></div>
    <div id="b"></div>
</div>

Answer 2

浮动元素必须放在HTML代码中的非浮动内容之前，即使它们在右侧浮动也是如此。所以，在#b之前将#c放在HTML中。