Platzierung von 4 HTML-Elementen in jeder Ecke eines div

Question

Hallo und danke für Ihre Hilfe. Ich habe ein div (180px zu 75px), in dem ich 3 paragraphes und ein Bild setzen muss. Jetzt muss ich diese Elemente in allen divs Ecken platzieren. Es sollte ungefähr so ​​aussehen -> (Ich darf noch keine Bilder posten. Ich hoffe, du verstehst es trotzdem.)

So sollte das div aussehen (jede Farbe ist ein Element), aber ich kann nicht scheinen, die Beschreibung nach rechts zu bekommen.

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

Aber egal, wie ich spiele, um mit dem „display: inline-block“ oder „schwimmen“ Ich kann es nicht bekommen zu arbeiten.

Ich hoffe jemand von Ihnen kann mir die Antwort geben?

<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> 

(Ich verwende eine externe CSS-Datei natürlich. Ich habe nur den Stil-Tag, um es Ihnen leichter verständlich zu machen.)

Answer 1

position:relative Verwendung auf dem übergeordneten Container einen Positionierungs Kontext herzustellen. Dann verwenden Sie position:absolute auf alle Kinder, um sie in die entsprechenden Ecken zu legen.

#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

Verwenden Sie die text-align:right, die den Trick sowieso für mich getan hat.

http://jsfiddle.net/Neaw7/