如何在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中的網格旁邊放置元素？

回答

相關問題