Absolute divs each other

Question

在我的html頁面中，我有一個容器div內的兩個div。兩個內部divs有一個'職位：aboslute'。因爲他們必須放在容器div的左下角。

當容器div只有一個內部div時，這很好用。但是當我添加第二個div時，則第二個div放在第一個內部div的頂部。這是有道理的。但現在我試圖找到一種方法讓他們在彼此旁邊而不是彼此重疊。

生成內部div。所以我不能手動添加一個ID給他們。他們只有一個班級名稱。

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

任何人有任何想法如何解決這個問題？

Answer 1

使用包裝元素，而不是每個單獨的圖標上的絕對定位，那麼你就可以漂浮或你有多喜歡該容器內的圖標的位置：

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

演示：http://jsfiddle.net/sYGfq/3/

Answer 2

如果只有2個可以使用：第一個孩子或最後一個孩子在CSS中，不需要添加額外的HTML。 CSS的幾行會照顧在這裏

例如http://jsfiddle.net/sYGfq/6/

CSS的最後一個子

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

Answer 3

在表中把雙方的div成單獨的細胞，從刪除所有邊框和填充該表並絕對將其放在父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！