如何在Foundation 6中的网格旁边放置一个元素？-Java 学习之路

我有一个大小为 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 without 回复，因为我控制变量 .

1 回答

您可以设置行's style (Or in your example'的情况，ID为“ #big_column ”的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 */
}

回复于 2024-05-02T08:48:04+08:00

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

1 回答

相关问题