0

2 つの div (A、B) を水平方向に中央に配置し、背景画像を 1 つの絶対配置 div (C) に配置する必要がある HTML/CSS コードに行き詰まっています。

ベーリングは次のことを念頭に置いています。

  • 大きい div (A) の下端は (C) の下端にある必要があります。
  • (A) の上端が (B) の上端にある必要があります。
  • (B) は (A) の後ろにある必要があります - これには同じpositionプロパティが必要だと思います。
  • (C) div に追加される内部 div 要素の数は制限されません

これは、(A) div を (C) http://jsfiddle.net/meridius/DGexR/内に配置することができたフィドルです。しかし、何をしても、残りを達成することはできません。

編集：
これはどのように見えるべきかですここに画像の説明を入力

コード プレビュー:
実際の例 (背景画像付き) については、上記のフィドルを参照してください。

HTML

<div class="desk">
    <div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    border: 1px solid #008000;
    z-index:1;
  /*   display:none; uncomment this to see .figurka centered how it is supposed to */
}

注:
この質問がローカライズされすぎてクローズされるのは避けたいので、最初に、CSS で要素を配置 (および中央揃え) する際に問題を抱えているのは私だけではないと信じていることを述べさせてください。

4

3 に答える 3

1

display: noneまたはを使用するとposition: absolute、.specialがフローから取り出され、.type適切に中央に配置されます。

水平方向にも中央.specialに配置するには、CSS-TRICKS の手法を使用できます: Centering Percentage Width/Height Elements : 上に移動し、幅の半分を左に移動します。

.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
}

残っている唯一のアイテムは、.special後ろ.typeに移動していz-index: -1ます。

JSFiddleをすべて見る

の幅が であることがわかっているので.sprite-halo、78pxもちろん、いつでもピクセル値を使用できます。

.special {
    position: absolute;
    top: 0;
    left: -39px;
}

@Bipin Kumar Palの回答も参照してください。

JSFiddle

于 2013-11-13T10:14:58.837 に答える