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

【问题标题】：Creating 2 overlayed divs under 2 side by side divs在 2 个并排的 div 下创建 2 个重叠的 div
【发布时间】：2013-03-10 00:21:17
【问题描述】：

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

有 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 旁边。

【问题讨论】：

您是否尝试过搜索CSS progress bar 以查看其他人如何处理此问题？另外值得注意的是，有一个progress 元素：developer.mozilla.org/en-US/docs/HTML/Element/progress
IE10 支持 Mozilla 进度条。我正在使用 jquery UI 进度条，它们确实在进度条顶部提供了一个标签示例，但它们确实提供了百分比以使标签文本居中。问题是当文本太长（即“完成”）时，居中会关闭。我想我会使用 text-align: center 来获得所需的效果并使标签占 100%。

标签： css html overlapping side-by-side

【解决方案1】：

如果您想将 div 堆叠在另一个之上，则需要使用 z-index 并绝对对齐 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>

【讨论】：

【解决方案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/

【讨论】：