CSS左對齊，右對齊，並重復中間

Question

我有一個.png左側和右側，第三個重複跨越（未知）窗口的寬度。

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

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

與此類似，float: right元件是在第二行中，因爲它是。

如果我添加display: inline（或〜-block）到中間元素，它不會顯示，但左/右是好的。

怎麼了？

Answer 1

浮動元素必須放置在HTML代碼中的非浮動的內容之前，即使他們漂浮在右邊。因此，請將#b之前的#c放在HTML中。

Answer 2

你可以試試這個，我重新安排了HTML

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

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