紧挨着的绝对divs

Question

在我的html页面中，我在一个容器div中有两个div。两个内部div有一个“position：aboslute”。因为它们必须被放置在集装箱div的左下角。

当容器div只有一个内部div时，这非常有效。但是当我添加第二个div时，第二个div会被放置在第一个内部div的顶部。这当然有道理。但现在我正试图找到一种方法，让它们彼此相邻，而不是相互重叠。

生成内部div。所以我不能手动为它们添加ID。它们只有一个类名。

示例：

<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放入一个表格中的独立单元格中，删除表格中的所有边框和填充，并将其绝对放置在父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;
}

快！

Answer 2

如果css中只有2个可以使用：first-child或：last-child，则不需要添加额外的HTML。用几行css就可以解决这个问题

此处示例http://jsfidle.net/sygfq/6/

最后一个子级的CSS

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

Answer 3

在包装元素上使用绝对定位，而不是每个单独的图标，然后您可以在容器中按您喜欢的方式浮动或定位图标：

<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://jsfidle.net/sygfq/3/