动态三个可变宽度列HTML布局

Question

我知道有一百万篇类似的文章，我花了几个小时尝试它们都无济于事。我希望必须有三列，并允许每列占用尽可能多的空间，但整个容器不要超过固定的（在本例中为500像素）。左列必须始终向左和向右齐平。左侧和/或右侧列通常为空，中心应使用整个宽度。

我当然可以通过固定布局的表格或固定大小的div来实现这一点，但是，我希望能够动态重用相同的容器来显示一列，两列或三列数据，然后使用整个宽度可用。我绝对允许对第1列和第3列中的内容进行修复，但它似乎没有帮助。

以下是一个例子：

<div style="width:500px;background:#ff0000;max-width:500px;">
    <div style="background:#00ff00;float:left;display:table-cell;">
          col1
    </div>
    <div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;">
          REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
    </div>
    <div style="background:#00ffff;display:table-cell;float:right;">
          col3
    </div>
</div>

抱歉，无法显示上述输出，因为它不允许我发布图片。