使用波旁整洁移动元素

我有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

使用波旁整洁移动元素

回答

相关问题