html - 在 float 之间居中行内 block 元素

Question

我有一个标题，其中包含左侧、中间和右侧的元素。为此，我有一个左浮动 div、一个右浮动 div 和一个 margin 0 自动 div，如下所示:http://jsfiddle.net/huggz/uuq4Z/1/

<div style="text-align: center;" >

    <div style="width: 200px; height: 100px; background: red; float: left;"></div>
    <div style="width: 100px; height: 100px; background: blue; float: right;"></div>

    <div style="background: green; margin: 0 auto; display: inline-block;">
        <div style="width: 150px; height: 100px; background: orange;"></div>
    </div>

</div>

我将中间的 div 设置为 inline-block 以尝试允许中间内容的宽度变化。然而，这样做会使 margin: auto 将 float 元素视为它们实际上在保留空间。如果左边比右边宽，我最终会得到一个稍微(或不太轻微)偏离中心的中间元素。

有没有办法做我想做的事情，最好不要求助于脚本。如果需要的话，我宁愿只处理使中间列固定宽度的后果。

[编辑]我应该提一下，有些情况下不存在中间或正确的内容。

Answer 1

您可以使用位置而不是 float :http://jsfiddle.net/uuq4Z/5/

<div style="text-align: center; position: relative;" >

    <div style="width: 200px; height: 100px; background: red; position: absolute; left: 0; top: 0"></div>
    <div style="width: 100px; height: 100px; background: blue; position: absolute; right: 0; top: 0;"></div>
    <div style="background: green; display: inline-block;">
        <div style="width: 150px; height: 100px; background: orange;"></div>
    </div>

</div>