如何在Foundation 6中的网格旁边放置元素？

我有一个大小为small-12的列中的图像的网格，我想在右侧添加一个元素，例如div。该列的大小必须是small-12，因此我无法将其设置为small-11，并在旁边添加div，大小为small-1。我怎样才能做到这一点？这与CSS伪元素或类有关吗？如何在Foundation 6中的网格旁边放置元素？

我试图用CSS和position: absolute;放置它，但它不是我想要的位置 - 就像元素的顶部和侧边有一个最小边距，所以top: 0vh;将不起作用。

看到这个CodePen片段：http://codepen.io/anon/pen/akwjgg 我不知道如果使用绝对位置是好的，这也打破了响应。邮件图标也应该位于顶部，没有margin-top，就像small-12一样。那么如何正确地做到这一点？

请使用SASS回复而不使用，因为我使用的在线CDN无法控制变量。

来源

2016-07-05 CodeShark

网站，电子邮件或应用程序的基础？另外，请提供您最初努力的代码。 – MassDebates

对于网站 - 我将编辑我的文章并添加一个codepen示例。给我几秒钟。 – CodeShark

我已经添加了一个片段@MassDebates。我希望我的意图是明确的！ – CodeShark

您可以设置该行的风格（或者在您的示例的情况下，与ID“”股利有position:relative;而不是position:initial; - 这将允许在它的元素，利用它的位置和boxmodel性质来确定自己的位置如果将它们设置position:absolute;

看到更新codepen： http://codepen.io/anon/pen/JKJabd?editors=1100

相关CSS：

#big_column { 
    background-color: #ccc; 

position:relative; /* Position:absolute... */ 
     height:3em; /* ... elements inside will use the...*/ 
    padding:1em;  /* ... lowest ascendant element set to Position:relative; */ 
} 

#mail { 
    display:inline-block; 
    right:1%; 
    bottom:-0.25em; 
    position:absolute; /* Uses #big_column's box-model properties (like dimensions, location, etc. to define the appropriate/relevant properties of its own */ 
}

来源

2016-07-05 13:46:22 MassDebates

如何在Foundation 6中的网格旁边放置元素？

回答

相关问题