Question

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

我尝试使用CSS和position: absolute;放置它，但它不是我想要的地方 - 就像元素的顶部和侧面有最小边距，因此top: 0vh;将无效。

请参阅此CodePen代码段：http://codepen.io/anon/pen/akwjgg 我不确定使用绝对位置是否良好，这也会打破响应能力。此外，邮件图标应位于顶部，没有margin-top，就像小12列一样。那么如何正确地做到这一点？

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

Answer 1

您可以设置行的样式（或者在您的示例中，或者使用带有ID＆＃39; #big_column＆＃39;的div来代替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 */
}

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

1 个答案: