絶対的なdivsは、お互いの隣に

Question

私のHTMLページでは、私は2つのdivをコンテナdivの中に持っています。 2つの内側のdivには「位置：aboslute」があります。彼らはコンテナのdivの左下隅に配置する必要があるので、

これは、コンテナdivに内部divが1つだけある場合に効果的です。しかし、2番目のdivを追加すると、2番目の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のfirst-childまたは：last-childを使用できます.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; 
} 

プレスト！