Umieszczanie 4 elementów html w każdym rogu div

Question

Cześć, dziękuję za pomoc. Mam div (180px do 75px), w którym muszę umieścić 3 paragraphes i obraz. Teraz muszę umieścić te elementy we wszystkich kątach div. Powinno to wyglądać mniej więcej -> (Nie wolno mi jeszcze publikować zdjęć.) Mam nadzieję, że i tak to zrozumiesz.)

Tak właśnie powinien wyglądać div (każdy kolor jest elementem), ale wydaje mi się, że nie mogę opisać tego po prawej stronie.

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

Ale bez względu na to jak gram około z „display: inline-block” lub „unosić” Nie mogę zmusić go do pracy.

Mam nadzieję, że ktoś z was może dać mi odpowiedź?

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

(używam extern plik css oczywiście. Ja po prostu stosować tag stylu, aby łatwiej można zrozumieć).

Answer 1

pomocą position:relative na pojemniku macierzystego w celu ustalenia kontekstu pozycjonowania. Następnie użyj position:absolute dla wszystkich dzieci, aby umieścić je w odpowiednich rogach.

#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

Użyj text-align:right To załatwiło sprawę dla mnie w każdym razie.

http://jsfiddle.net/Neaw7/