相邻的绝对定位元素

Question

在我的HTML页面中，我有两个内部div在一个容器div中。这两个内部div具有'position: absolute'属性。因为它们必须放置在容器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;
}

有人知道如何解决这个问题吗？

- w00

---

你可以将它们设置为相对定位，这样它们就能相对于它们的父容器元素保持布局。 - jeschafe

将每个ICON放置在“li”中，而不是“div”元素中，这样样式化列表项就非常灵活和简单！ - Liggy

只需使用first-child/last-child，参见我的答案。 - Huangism

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/

- Wesley Murch

Answer 2

如果只有两个元素，您可以在CSS中使用:first-child或:last-child，无需添加额外的HTML。几行CSS就可以搞定。

示例在这里 http://jsfiddle.net/sYGfq/6/ 用于最后一个子元素的CSS。

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

- Huangism

---

谢谢，但我不认为last-child在IE7中受支持（对于IE8不确定）。 - w00

然后使用first-child中的一个，其中一个得到支持，参见http://jsfiddle.net/sYGfq/8/在IE 7中。 - Huangism

@Huangism 你在IE浏览器中检查了吗？因为其中一个图标会溢出容器div。此外，当你有三个或更多的图标时，“first-child”有什么用呢？ - Vivendi

@Vivendi 我在 IE 7 上的 VM 中完成了第一个子元素，但它掉出来了，因为我将左侧设置为 200。在他的问题中，他只提到了 2 个，我的答案也是如此。如果有更多的图标，那么在问题中并不明显。 - Huangism

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

完成！

- The_HTML_Man