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

Question

我需要两个 div 都具有动态宽度。灰色的必须居中，而蓝色的要向右浮动，但都必须水平对齐。

这些都坐在一个包装纸里。

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

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

编辑

这就是它应该的样子。我只是放了另一个左浮动div。

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

Answer 1

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

只是众多选择之一。

这是一个演示：http: //jsfiddle.net/HnsEx/

Answer 2

这是一个小提琴:)

小提琴

和CSS

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