在 2 个并排 div 下创建 2 个重叠的 div

Question

我似乎找不到如何创建这个简单的对齐方式：

一行有 2 个并排的 div，第一个占据所需的空间，后者占据剩余空间（使用内联块或浮动就足够简单了）

右侧 div 应该包含两个重叠的子 div，每个子 div 占据右侧父级的 100%（这是我做不到的）。

我的动机是一个带有标签（左侧）的进度条和进度条上的百分比标签。进度标签文本应该居中（这就是为什么我需要它 100% 的右父项）

如果有人有任何想法，我很想听听。

这是我的问题的说明：

<div id="all">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

#all {
    width: 200px;
    height: 100px;
    background: grey;
    border: 1px solid;
}

#left {
    background: red;
    float: left;
    height: 100%
}

#right {
    background: blue;
    display: block;
    height: 100%;
}

这是一个 jsFiddle 的说明：http://jsfiddle.net/a9cnH/3/

我的问题：我想将 2 个 div 放置在“右”div 内。每个应该占据右侧 div 的 100%。如果我在它们上使用绝对，那么我必须将我的“右”div 位置设置为“静态”以外的位置，但这使其无法与左 div 并排对齐。

Answer 1

如果您想将 div 堆叠在另一个 div 之上，则需要使用 z 索引并绝对对齐 div。示例：

   <div style="border: 1px sold red; width: 300px; height:200px; background-color:White;position:relative;">
        <div style="width:50%; height:100%; background-color:Red; z-index:2;  float:left; "></div>
        <div style="width:50%; height:100%; background-color:blue;z-index:2; float:right; "></div>
        <div style="width:50%; height:50%; background-color:green;z-index:3; top:25%; left:25%; position:absolute; "></div>   
   </div>

Answer 2

我终于明白了。

我需要左右 div 来隐藏溢出。 我可以将正确的 div 位置相对放置。

<div id="all">
    <div id="left">
        left
    </div>
    <div id="right">
        <div id="right1">
            r1
        </div>
        <div id="right2">
            r2
        </div>
    </div>
</div>

#all {
    width: 200px;
    height: 100px;
    background: grey;
    border: 1px solid;
}

#left {
    background: red;
    height: 100%;
    float: left;
    overflow: hidden;
}

#right {
    background: blue;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#right1 {
    width: 100%;
    background: green;
    position: absolute;
}

#right2 {
    width: 100%;
    position: absolute;
    text-align: center;
}

它的样子：http://jsfiddle.net/nSD66/