包装器内的水平对齐div，具有动态宽度，一个居中

Question

我需要两个div都有动态宽度。 灰色的一个必须居中，而蓝色的一个要浮动，但两者都是水平的。

这些是坐在包装纸上。

问题是，为了有不同的宽度，我使用display:block，这使得灰色div将另一个推下来。

如何在不设置灰色div的固定宽度的情况下管理它？

修改

它应该是这样的。我只是把另一个左浮动div。

红色div必须完美居中。 所有div的宽度必须是动态的。

Answer 1

您可以将蓝色div嵌套在灰色div中，并将其绝对定位，使用left:100%将其水平停靠在灰色div的右侧。

只是众多选择中的一个。

以下是演示：http://jsfiddle.net/HnsEx/

Answer 2

这是一个小提琴：）

fiddle

和css

#parent {
overflow: hidden;
  border: 1px solid red
    }
    .right {
        float: right;
        width: 100px;
        height: 100px;
        background: #888;
    }
    .left {
        overflow: hidden;
        height: 100px;
        background: #ccc
    }