相对调整子区的位置

Question

我有一个HTML，它显示一些带有背景图像的窗口。每行包含一定数量的此类窗口。现在，我想要它们的小变化，我想将第一行第 2 个窗口（以及该行中的所有窗口）定位到第 2 行第 2 个窗口的右侧。简而言之，窗口应该移动到第 2 行中第二个窗口的右侧。我不知道该怎么做。这是用HTML和CSS编写的代码，作为

网页代码-

    <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/请让我知道我应该怎么做才能在同一行中移动窗户。

谢谢！

Answer 1

我相信

这就是你要找的。 如果是，请告诉我，我将更新我的答案以解释我更改了什么以及为什么。

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