Wie platziert man ein Element neben einem Raster in Foundation 6?

Question

Ich habe ein Raster mit einem Bild in einer Spalte der Größe small-12 und ich möchte neben einem Element auf der rechten Seite hinzufügen, zum Beispiel ein div. Die Spalte muss die Größe small-12 haben, also kann ich sie nicht auf small-11 setzen und das div daneben mit einer Größe von small-1 hinzufügen. Wie kann ich das machen? Ist dies mit CSS-Pseudoelementen oder -klassen verbunden?

Ich habe versucht, es mit CSS und position: absolute; zu platzieren, aber es ist nicht, wo ich es will - wie gibt es einen minimalen Rand nach oben und Seite für Elemente, so top: 0vh; wird nicht funktionieren.

Sehen Sie dieses CodePen Ausschnitt: http://codepen.io/anon/pen/akwjgg Ich bin mir nicht sicher, ob die absolute Position ist gut und auch dies bricht die Reaktionszeit. Auch das Mail-Icon sollte oben ohne Rand oben sein wie die Small-12-Spalte. Also, wie mache ich das richtig?

Bitte antworten Sie mit einem Weg ohne mit SASS, weil ich ein Online-CDN verwende, wo ich die Variablen nicht steuern kann.

Answer 1

Sie den Stil der Reihe festlegen können (oder bei Ihrem Beispiel ist, das div mit der ID ‚#big_column‘ position:relative; statt position:initial; haben - diese werden Elemente in ihm ermöglichen, seine Lage und boxmodel Eigenschaften zu nutzen, um ihre eigene Position zur Bestimmung wenn sie auf position:absolute; gesetzt sind

siehe aktualisiert codepen: http://codepen.io/anon/pen/JKJabd?editors=1100

relevanten 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 */ 
}