5

以下のスクリーンショットのように、3つのスクリーンショット画像を揃えるためにHTMLとCSSをコーディングする方法を理解しようとしています。

ユーザーがウィンドウのサイズを変更すると、左右の画像が中央に向かって移動するか、メイン画像の後ろにきつくなり、メイン画像は常に中央に留まるようになります。

私の開発リンク：http： //leongaban.com/portfolio/athenasweb/

私のCodePenhttp ://codepen.io/leongaban/pen/AwJFt

ここに画像の説明を入力してください

そして、ヒントや方向性は非常に高く評価されます！：D

HTML

<div class="pattern">

    <div class="athena_thumbs">

        <div class="first">
            <img src="../../images/athena1.jpg"/>
        </div>

        <div class="second">
            <img src="../../images/athena2.jpg"/>
        </div>

        <div class="third">
            <img src="../../images/athena3.jpg"/>
        </div>

    </div>

</div>

CSS

div.inner .pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
    background-repeat: repeat;
    z-index:2;
 }    

.athena_thumbs {
    position: absolute;
    max-width: 1000px;
    margin: 250px auto 0;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    float: left;
    left: 25%;
    right: 25%;
    z-index: 3;
}

.athena_thumbs .second {
    position: relative;
    float: left;
    left: 10%;
    right: 5%;
    z-index: 2;
}

.athena_thumbs .third {
    position: relative;
    float: left;
    right: 10%;
    left: 5%;
    z-index: 1;
}
4

2 に答える 2

3

会議に遅れる。でも、よく見ると

コードペン: http://codepen.io/anon/pen/bazEr

.athena_thumbs {
    position: absolute;
    width: 90%;
    margin-left: 5%;  
    text-align: center;
    overflow: hidden;
}

.athena_thumbs .first {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}

.athena_thumbs .second {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

.athena_thumbs .third {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

これにより、正しい方向に進むことができると思います。クロスブラウザチェックの邪魔になるものは何もありません。基本的な相応の効果が多かれ少なかれ整っています。

お役に立てれば。

于 2013-03-10T22:15:45.433 に答える
1

これがお役に立てば幸いです。私はあなたが求めている効果を得るために私がどのように取り組むかについての小さなデモンストレーションをまとめました。それはここで見つけることができます。

外側のサムネイルをに設定しposition: absolute;、親コンテナのいずれかの側に貼り付けて、整列を維持するために一番上の位置を指定するようにします。中央揃えのサムネイルをに設定し、position: relative通常どおり自動マージンで中央揃えにします。z-indexingは、外側の親指を中央の親指の後ろに保ちます。

于 2013-03-10T22:17:28.087 に答える