Bezwzględne divy obok siebie

Question

Na mojej stronie html mam dwa divy wewnątrz div kontenera. Dwa wewnętrzne divy mają "position: aboslute". Należy je umieścić w lewym dolnym rogu pojemnika div.

Działa to doskonale, gdy pojemnik div ma tylko jeden wewnętrzny element div. Ale kiedy dodaję drugi div, wtedy drugi div jest umieszczany na szczycie pierwszego wewnętrznego diva. Co ma sens. Ale teraz staram się znaleźć sposób, aby umieścić je obok siebie, zamiast się na siebie nachodzić.

Wewnętrzne elementy div są generowane. Nie mogę więc ręcznie dodać do nich identyfikatora. Wszystko, co mają, to jedno imię klasy.

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

ktoś ma jakiś pomysł jak rozwiązać ten problem?

Answer 1

Użyj pozycjonowanie bezwzględne na elemencie otoki zamiast poszczególnych ikon, można pływać lub umieścić ikony jak chcesz w tym pojemniku:

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

Demo: http://jsfiddle.net/sYGfq/3/

Answer 2

Jeśli są tylko 2, możesz użyć: first-child lub: last-child w css, bez potrzeby dodawania dodatkowego html. Kilka wierszy css zadba o niego

przykładem http://jsfiddle.net/sYGfq/6/

CSS do ostatniego dziecka

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

Answer 3

Put obu div do komórek oddzielne w tabeli, należy usunąć wszystkie granice i wyściółka z tabeli i bezwzględnie umieść ją w lewym dolnym rogu rodzica div.

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