绝对div旁边彼此

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/