Html 相对调整子div的位置

我有一个HTML，其中显示了一些带有背景图像的窗口。每一行都包含一些这样的窗口。现在，我希望它们有一个小的变化，我希望将第一行第二个窗口（以及该行中的所有窗口）定位到第二行第二个窗口的右侧。简言之，车窗应移到第二排第二个车窗的右侧。我不知道该怎么做。下面是用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>

这里是jsFiddle链接 请让我知道我应该做什么来移动同一排的窗户

---

谢谢

我相信这就是你要找的。请让我知道，如果是，我会更新我的答案，解释我改变了什么和为什么

---

您希望有动画吗？什么用户事件触发了转换？拖放？否。事件是它们之间的依赖关系。因此，如果第1行的窗口1依赖于第2行的窗口2，那么第1行的窗口1应该出现在第2行的窗口2之后。@Dave:知道怎么做吗？是的，这是我想要的。在我的实际工作代码中，我没有指定top和left。所有内容都相对定位，并带有浮动：左。那么，除了指定左边，还有其他方法可以设置它吗。我也在使用边距，但问题是每个窗口的边距都设置为相同的，因此我无法确定哪个窗口放在第一位。谢谢你的回答

    .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;
    }