css – 对齐三个SPAN / DIV标签 – 固定左,固定右,填充中间

我想在一行中有三个div或span标签.左= 57px宽度图像;右= 57px图像;中心=填充整个宽度的跨度图像.

<div class="bar-left"></div>
<div class="bar-span"></div>
<div class="bar-right"></div>

基本上我正在绘制一个花哨的hr线,每一端都淡出.我可以使用float：left来对齐左右图像;和浮动：对;但中间似乎不可能.

有任何想法吗？

JSFiddle

我的想法是将左右列放在顶部并浮动它们,然后将margin放到内容div中,这样它就不会在浮动的下面包裹……

<div class="bar-left"></div>
<div class="bar-right"></div>
<!- content goes in last -->
<div class="bar-span"></div>

CSS：

.bar-left
{
    float: left;
    width: 57px;
}

.bar-right
{
    float:right;
    width: 57px;
}

.bar-span
{
    margin: 0 70px;
}