我需要幫助安排使用中失去電網

我的HTML代碼以這種方式組織DIV的位置：我需要幫助安排使用中失去電網

<div class="Container"> 

    <div class="Card"></div> 
    <div class="Card"></div> 
    <div class="Card"></div> 
    <div class="Card"></div> 
    <div class="Card"></div> 

</div>

而我的CSS被組織成這樣：

.Container 
    lost-utility clearfix 

.Card:first-child 
    lost-waffle 1 1 15px 

.Card:nth-child(n+2) 
    lost-waffle 1/2 2 15px

結果如下所示：

我的問題是，我想獲得的第一個div跨越日的100％寬度，它在圖像中顯示的方式，其餘的div顯示1/2的寬度。我不知道如何讓第二個div到左邊而不是右邊，然後是第三個div到右邊和上邊等等......基本上所有在第一個div之後的div需要被移位1.我一直沒能弄清楚這一點。任何幫助，將不勝感激。

來源

2016-08-19 Sameer A.

請提供一個jsfiddle模仿你完成了什麼。 –

@GavinThomas我不知道該怎麼做。丟失的網格需要post-css，我使用Stylus作爲我的預處理器。 –

我認爲Codepen支持這一點。 –

這裏的問題是由LostGrid的cycle引起的。由於LostGrid使用:nth-child作爲選擇哪些元素的樣式，頂部「卡」是cycle中的第一個，然後第二個「卡」排在第二位......在佈局中，第二張卡應該啓動cycle而不是第二。

我有三個選項可以快速解決這個問題。

選項1 使用LostGrid，並有包含各地不同的卡divs。

選項2不使用LostGrid，而是使用它提供的數學算法，並在香草css中創建佈局。

這裏有一個CodePen與三個選項：http://codepen.io/peterramsing/pen/YWrrjv

我對選擇2精益作爲LostWaffle是專爲等於卡大小。

選項3？我包括第三個選項。它有效，但它有一些多餘的css輸出。但這是一個想法。

我還沒有碰到這樣與LostGrid一個問題，但我要麼使用香草css這或將使用含divs。 LostGrid是用於創建網格的令人驚異的工具，它的構建可以幫助增強現有的手段，css用於創建網格。有很多次，當LostGrid不是使用的工具和PostCSS的時候它很棒，因爲如果你只用了很少的幾次，它不會增加膨脹。

但是，這可能是LostGrid對cycle有更多控制權的可能功能添加。我會再考慮一下。

如果您認爲cycle在以後的版本中應該有一些額外的自定義功能，希望能夠幫助並確保通知我。

來源

2016-08-21 06:19:26

我需要幫助安排使用中失去電網

回答

相關問題