0

背景画像を含むいくつかのウィンドウを表示する HTML があります。すべての行には、そのようなウィンドウがいくつか含まれています。ここで、それらに小さなバリエーションが必要です.1行目の2番目のウィンドウ（およびその行のすべてのウィンドウ）を2行目の2番目のウィンドウの右側に配置したいと考えています。簡単に言えば、ウィンドウを 2 行目の 2 番目のウィンドウの右側に移動するだけです。その方法がわかりません。HTMLとCSSで書かれたコードは次のとおりです。

HTMLコード-

    <div class="container">
        <div class="flower chunk1">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk15">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk2">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk3">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk4">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    </div>


    <div class="container">
        <div class="flower chunk5">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk6">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk7">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk8">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    </div>

    <div class="container">
        <div class="flower chunk9">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk10">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk11">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>

        <div class="flower chunk12">
        <div><img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/></div></div>
    </div>

CSSコード-

    .container {
        float: left;
        white-space: nowrap;

    }
    .flower {
        display: inline;
        float: left;
        margin: 10px;
        width: 100px;
        height: 100px;
        overflow: hidden;
        border: 1px solid red;
    }
    .flower img {
        width: 100%;
        height: 100%;
    }
    .flower div {
        width: 200px;
        height: 200px;
        position: relative;
    }

    .chunk2 div {
        left: -100px;
    }
    .chunk3 div {
        top: -100px;
    }
    .chunk4 div {
        top: -100px;
        left: -100px;
    }

ここにjsFiddleリンクがありますhttp://jsfiddle.net/VSd6Y/16/ 同じ行でウィンドウを移動するにはどうすればよいか教えてください。

ありがとう！

4

1 に答える 1

0

これがあなたが探しているものだと思います。変更内容と理由を説明するために回答を更新します。

http://jsfiddle.net/VSd6Y/17/

于 2012-09-24T21:41:54.067 に答える