調整子div的位置相對

我有一個HTML，它顯示了一些窗口中的背景圖像。每行都包含一些這樣的窗口。現在，我想要一個小的變化，我想將第一行第二個窗口（和該行中的所有窗口）定位到第二行第二個窗口的右側。簡而言之，窗戶應該移動到第二排第二個窗戶的右側。我不知道該怎麼做。這裏是代碼編寫HTML CSS &作爲調整子div的位置相對

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/ 請讓我知道我應該怎麼做移動同一行中的窗口。

謝謝！

來源

2012-09-24 unix_user

你想要那裏有動畫嗎？什麼用戶事件觸發了這個轉變？拖放？ – Dave

不是。事件是它們之間的依賴關係。因此，如果行1中的窗口1依賴於行2上的窗口2，那麼行1中的窗口1應該出現在行2中的窗口2之後。 –

@Dave：任何想法該怎麼做？ –

我相信這就是你要找的。請讓我知道，如果是這樣，我會更新我的答案，解釋我改變了什麼，爲什麼。

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

來源

2012-09-24 21:41:54 Dave

是的，這是我想要的東西。在我的實際工作代碼中，我沒有指定top和left。一切都相對定位，並與浮動：左。那麼除了指定左邊以外，還有其他什麼方法可以設置。以及我使用的邊距，但問題是邊緣設置爲相同的每個窗口，所以我無法確定哪個窗口首先放置。感謝您的回答 –

像這樣？ http://jsfiddle.net/VSd6Y/19/ – Dave

調整子div的位置相對

回答

相關問題