Absolute divs birbirinin yanındaki

Question

Benim html sayfamda bir konteyner div içinde iki div var. İki iç div, bir 'pozisyon: aboslute' var. Bilirsiniz, konteyner div'in sol alt köşesine yerleştirilmeleri gerekir.

Bu, konteyner div yalnızca bir iç diva sahip olduğunda harika çalışır. Ama ikinci bir div eklediğimde, ikinci div ilk iç divun üstüne yerleştirilir. Hangisi anlam ifade ediyor. Ama şimdi onları birbirleriyle örtüşmek yerine birbirlerinin yanında bulmanın bir yolunu bulmaya çalışıyorum.

İç boşluklar oluşturulur. Bu yüzden onlara manuel olarak bir kimlik ekleyemiyorum. Tek sahip oldukları bir sınıf ismi.

Example:

<div id="container"> 
    <div class="icon">ICON1</div> 
    <div class="icon">ICON2</div> 
</div> 

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 

.icon { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border: 1px solid green; 
} 

Herkes nasıl bu çözmek için bir fikrin var?

Answer 1

yerine tek tek her simge bir sarma elemanı üzerinde mutlak konumlandırma kullanarak, daha sonra yüzen veya bu kap içinde gibi nasıl simgeleri pozisyon olabilir:

<div id="container"> 
    <div class="icon-wrapper"> 
     <div class="icon">ICON1</div> 
     <div class="icon">ICON2</div> 
    </div> 
</div> 

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 
.icon { 
    border: 1px solid green; 
    float:left; 
} 
.icon-wrapper { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

Gösteri: http://jsfiddle.net/sYGfq/3/

Answer 2

Sadece 2 kişi varsa kullanabilirsiniz: birinci çocuk veya: css'de son çocuk, ek html eklemenize gerek yoktur. css Birkaç satır, bir tablodaki ayrı hücrelere divs hem koyun son çocuk

.icon:last-child { 
    left: 200px; 
    border: 1px solid green; 
} 

Answer 3

için buraya

örnek bunun http://jsfiddle.net/sYGfq/6/

CSS özen gelen tüm sınırları ve dolgu kaldıracaktır masa ve kesinlikle ebeveyn div alt sol köşesinde konumlandırın.

<div id="container"> 
<table class="none" id="table1"> 
<tr class="none"> 
<td class="none"> 
<div class="icon">ICON1</div> 
</td> 
<td class="none"> 
<div class="icon">ICON2</div> 
</td> 
</tr> 
</table> 
</div> 

---

#container { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
} 

.icon { 
    border: 1px solid green; 
} 

.none { 
    border: 0; 
    padding: 0; 
} 

#table1 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

Presto!