HTML CSS-Styling-Box

Question

Ich versuche eine Box zu formatieren, um wie ein "Status-Update" wie Funktion aussehen. Momentan sieht es so aus.

Idealerweise möchte ich die obere rechte Ecke der Box, um das Datum und die untere rechte Ecke anzuzeigen, um "Antworten" anzuzeigen. Wie Sie auf dem Bild sehen können, tut es das nicht wirklich. Jede Hilfe, wie dies zu tun ist, wird sehr geschätzt.

Mein CSS-Code ist hier. http://jsfiddle.net/hKcmu/

Vielen Dank!

Answer 1

hinzufügen

position: relative; 

zu Ihrem enthalten div dann

boxytest sup 
{ 
    position: absolute; 
    right: 2px; 
    top: 2px; 
} 

boxytest sub 
{ 
    position: absolute; 
    right: 2px; 
    bottom: 2px; 
} 

verwenden, um das Datum/Antworten zu positionieren.

Heres Ihre aktualisiert Fiddle

bearbeiten

Sie Polsterung auf der boxytest können mit der Text fertig zu werden zu lang,

dies für die ober- und unterhalb der Text genügend Platz legt Datum/Antworten

boxytest 
    { 
    position: relative; 
    ..... 
    padding: 20px 0; 
    } 

und das macht Platz auf der rechten Seite

boxytest 
    { 
    position: relative; 
    ..... 
    padding: 20px 0; 
    padding: 4px 120px 4px 0; 
    } 

Fiddle aktualisiert

Answer 2

eine Kombination aus position: relative Nutzung und position: absolute:

boxytest { 
    /* all the other CSS */ 
    position: relative; 
} 

boxytest sup { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 48%; 
} 
boxytest sub { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 48%; 
}​ 

JS Fiddle demo.