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

Question

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

有 2 个并排 div 的行，第一个占用它需要的空间，后者占用剩余空间（这个很简单，使用 inline-block 或 float）

正确的 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/

我的问题：我想在“正确”的 div 中放置 2 个 div。每个都应占正确 div 的 100%。如果我在它们上使用绝对值，那么我必须将我的“右”div 位置设置为“静态”以外的位置，但这使得它不会与左 div 并排对齐。

Answer 1

If you want to stack divs on top of on another, you need to use the z-index and align divs absolutely. Example:

   <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/