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

Question

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

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

查看此 CodePen sn-p：http://codepen.io/anon/pen/akwjgg 我不确定使用绝对位置是否很好，这也会破坏响应能力。此外，邮件图标应该在顶部，没有边缘顶部，就像 small-12 列一样。那么如何正确做呢？

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

Answer 1

您可以设置行的样式（或者在您的示例中，ID 为“#big_column”的 div 具有 position:relative; 而不是 position:initial; - 这将允许其中的元素利用其位置和 boxmodel 属性如果设置为position:absolute;，则用于确定自己的位置

查看更新的代码笔： 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 */
}