在我的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;
}
有人知道怎么解决吗？
在包装元素上使用绝对定位，而不是每个单独的图标，然后您可以在容器中按您喜欢的方式浮动或定位图标：
<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/
如果css中只有2个可以使用：first-child或：last-child，则不需要添加额外的HTML。用几行css就可以解决这个问题
此处示例http://jsfidle.net/sygfq/6/
最后一个子级的CSS
.icon:last-child {
left: 200px;
border: 1px solid green;
}
将两个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;
}
快！
