html - 彼此相邻的绝对 div

Question

在我的 html 页面中，我在一个容器 div 中有两个 div。两个内部 div 有一个“位置：绝对”。因为它们必须放在容器 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 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;
}

快！