使用波旁整潔移動元素

我有3個項目，全部需要3列。我想把它們中的兩個移到右邊，並且讓左邊的1離開。這是SASS/SCSS我使用：

#mod-header{ 
    background-color: $primaryColor; 
    color: $primaryTextColor; 

    header{ 
     @include outer-container(); 

     .social{ 
      @include shift(9); 
      @include span-columns(3); 
     } 

     .contactDetails{ 
      @include shift(9); 
      @include span-columns(3); 
     } 

     .dealerLogo{ 
      @include span-columns(3); 
     } 

    } 
}

但是，這是我得到的結果：

https://jsfiddle.net/2qfm6dnd/

IE。它將.social和.contactDetails按照.dealerLogo的高度降低。我該如何阻止這種情況？

我知道答案可能非常簡單。

來源

2016-12-08 Strontium_99

默認情況下，Neat使用12列。所以如果第一個元素佔用三個，那麼你剩下9個。根據你的描述，我認爲你想要一個開放的四分之一，然後是第二和第三個元素。如果我在那裏錯了，請糾正我。

剩下的九個柱子，兩個最後的元素將共同佔用6個柱子（每個3個）。通過添加margin-left，整潔的shift mixin移動元素。所以如果我們將第二個元素轉換成3列，第三個元素根本就不需要移位！

看到這個演示：

如果你真的想要第二個元素（.social）是在最右側的列，與它下面的第三個元素（.contactDetails），你需要在轉變social 6（3 + 6 + 3）。但是Neat包括所有行中的最終元素的右邊距。這就是mixin進來的地方，將其刪除。這是一個令人困惑的問題，可能沒有必要，所以我會link it並添加一個變體，顯示在Codepen演示中。

來源

2016-12-09 03:53:29 alexbea

現在我明白了。不管怎麼說，我都假定從第一列開始，轉換mixin就開始了。太棒了。感謝您的澄清。 –

我完全可以理解這一點。我不得不提醒自己，我所使用的任何網格系統是如何定期工作的。當出現意想不到的事情時，我經常對編譯的CSS有所幫助，看看發生了什麼。如果元素是'position：absolute'並且放置了'left'屬性（有時是這樣的話），那麼你的方法就是對的。這裏我們有浮動和左邊距。 – alexbea

使用波旁整潔移動元素

回答

相關問題