1

私は初心者で、毎日 CSS についてもっと学ぼうとしています (私は不器用で「不自然」ですが、私の脳は古いコンピューターのように熱くなっています)。同じスタイルを共有し、2 行 2 列にインラインで表示される一連の独立したモジュールをコーディングする方法を知りたいです。モジュールごとに用紙スタックを再作成し、それを使用z-indexしてabsolute配置したいと考えています。

私が探しているものを示すためにこの画像を作成しました：

ここに画像の説明を入力

一番上の divを試してみましたが、この方法では、および座標display:inlineを使用して、モジュールごとに個々の重複した div をコーディングする必要がありました。position:absolute最も望ましいのは、同じクラスを使用して、単一のモジュールとオーバーラップを繰り返すことができることです (各モジュールのオーバーラップされた div 座標を変更する必要はありません)。

CSSを使用してこれを行う方法について誰か考えがありますか? 前もって感謝します ：）

4

2 に答える 2

0

はい、次のことができます。最適な寸法にサイズ変更する必要があります。JSfiddle はこちら: http://jsfiddle.net/CNPJ9/2/ 

<div class="contain">
    <div class="box">
         <h1>A</h1>

    </div>
    <div class="behind"></div>
</div>
<div class="contain">
    <div class="box">
         <h1>B</h1>

    </div>
    <div class="behind"></div>
</div>
<div class="contain">
    <div class="box">
         <h1>C</h1>

    </div>
    <div class="behind"></div>
</div>
<div class="contain">
    <div class="box">
         <h1>D</h1>

    </div>
    <div class="behind"></div>
</div>

.contain {
    margin:25px 25px;
    float:left;
}
.box h1 {
    font: 8em normal Futura, sans-serif;
    text-align:center;
    color:#f1f1f1;
}
.box {
    width:400px;
    height:300px;
    background:#000;
    z-index:1;
    float:left;
    position:absbolute;
}
.behind {
    width:350px;
    height:325px;
    margin-left:25px;
    background:#333;
    z-index:2;
}
于 2013-10-04T22:11:42.407 に答える