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/

我的问题：我想在“右”div中定位2个div。每个人应该占正确div的100％。如果我对它们使用绝对值，那么除了“静态”之外我必须使用“正确”的div位置，但是这使得它不会并排放在左边的div旁边。

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

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/

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

2 个答案: