0

この単純な配置を作成する方法が見つからないようです。

2つのdivを並べた行を作成します。最初は必要なスペースを占有し、後者は残りのスペースを占有します（これはインラインブロックまたはフロートで十分に単純です）

右のdivには、それぞれが右の親の100％を占める2つのオーバーレイされた子divが含まれている必要があります（これはできませんでした）。

私の動機は、ラベル（左側）とプログレスバーの上にパーセントラベルが付いたプログレスバーです。進行状況ラベルのテキストは中央に配置する必要があります（これが、右の親を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の隣に並べて配置されなくなります。

4

2 に答える 2

0

div を別の 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>
于 2013-03-08T19:53:17.100 に答える
0

やっと手に入れました。

オーバーフローを非表示にするには、左と右の両方の 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/

于 2013-03-09T16:21:17.653 に答える