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>