Inserimento di 4 elementi HTML in ogni angolo di un div

Question

Ciao e grazie per il vostro aiuto. Ho un div (da 180px a 75px) in cui ho bisogno di mettere 3 paragrafi e un'immagine. Ora ho bisogno di mettere quegli elementi in tutti gli angoli div. Dovrebbe sembrare qualcosa del genere -> (Non sono autorizzato a postare ancora immagini. Spero che lo capirai comunque.)

Ecco come dovrebbe apparire il div (ogni colore è un elemento), ma non riesco a ottenere la descrizione a destra.

http://i.imgur.com/bE87euS.png

Ma non importa come gioco in giro con il "display: inline-block" o il "galleggiare" Non riesco a farlo funzionare.

Spero che qualcuno di voi possa darmi la risposta?

<div style="width:180px; height: 75px; background-color: green;" id="achievement"> 
    <div> 
     <p style="display: inline-block; margin: 0px" id="title">Title Title Title</p> 
     <p style="margin:0px; float:right;" id="exp">500 exp</p> 
    </div> 
    <div> 
     <img style="padding-left: 10px;" id="img"width="50" height="50" src="image.png"/> 
     <p style="float:right; margin: 0px;" id="desc">Bla Bla Bla this is a description</p> 
    </div> 
</div> 

(io uso un file CSS extern ovviamente. Ho appena usato il tag stile per rendere più facile per voi capire.)

Answer 1

Utilizzare position:relative sul contenitore principale per stabilire un contesto di posizionamento. Quindi usa position:absolute su tutti i bambini per metterli negli angoli appropriati.

#parent { 
 
    position:relative; 
 
    border:3px solid blue; 
 
    height:300px; 
 
    width:500px; 
 
    padding:0; 
 
} 
 
p { 
 
    position:absolute; 
 
    border:2px solid; 
 
    margin:0; 
 
    padding:5px; 
 
} 
 
p:nth-child(1) { 
 
    border-color:green; 
 
    top:0; 
 
    left:0;  
 
} 
 
p:nth-child(2) { 
 
    border-color:red; 
 
    top:0; 
 
    right:0; 
 
} 
 
p:nth-child(3) { 
 
    border-color:yellow; 
 
    bottom:0; 
 
    left:0; 
 
} 
 
p:nth-child(4) { 
 
    border-color:pink; 
 
    bottom:0; 
 
    right:0; 
 
}

<div id="parent"> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
    <p>Fourth</p> 
 
</div>

Sample implementation here

Answer 2

Utilizzare il text-align:right Che ha fatto il trucco per me comunque.

http://jsfiddle.net/Neaw7/