Question

在我的html页面中，我在容器div中有两个div。两个内部div有一个'位置：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 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;
}

的Presto！

绝对div彼此相邻

3 个答案: