对齐三个SPAN/DIV标记- fixed left、fixed right、fill middle

Question

好吧，这快把我逼疯了！

我希望一行中有三个div或span标记。左= 57px宽度的图像；右= 57px的图像；中心=填充整个宽度的跨度图像。

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

基本上，我画了一条奇特的hr线，每一端都逐渐淡出。我可以使用float: left；和float: right来对齐左右图像，但中间似乎不可能。

有什么想法吗？

Answer 1

这样可以吗？

JSFiddle

这个想法是将左右列放在顶部并浮动它们，然后将边距放到内容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;
}

Answer 2

将浮动div放在非浮动div之前：

<div class="bar-left" style="float: left; color: blue; background-color: blue; width: 57px;">&nbsp;</div>
<div class="bar-right" style="float: right; width: 57px; background-color: blue;">&nbsp;</div>
<div class="bar-span" style="background-color: green; display: block;">&nbsp;</div>

Answer 3

传统上，当您想要像这样端到端排列时，您需要将它们全部向左或向右浮动。