Css 具有堆叠图像的水平Div对齐

我有四个div（和一些img），具体如下：

<div class="c">
    <div class="m">
        <img class="i" />
        <img class="i" />
        <img class="i" />
    </div>
    <div class="p">
    </div>
</div>
<div class="r">
</div>

img应该在div.m内部相互堆叠（我们正在操纵它们的z索引以获得各种效果）。堆叠是通过以下方式实现的：

postion: absolute;

最初，div.m和div.p的位置被交换，并将它们放置在div.c中，使用

float: left;

在div.p上，一切都很顺利

现在我已经交换了它们的位置，但是浮动/清除/位置/显示的组合不会使它们水平对齐-它们都只是堆叠在左上角。更重要的是，副警长也是。我已经能够通过绝对地指定所有内容来获得我想要的效果，但这感觉是错误的

为什么float等人不工作？感觉可能与图像堆叠有关，但我不确定，也不知道如何修复它

下面是我认为应该可以使用的CSS（因为当标记中的m和p被交换，浮点被应用到p时，CSS就可以使用了），但这不是：

.m
{
    float: left;
}
.i
{
    position: absolute;
}
.r
{
    float: left;
}

---

更新：我是个白痴。我意识到这对认识我的人来说既不是新闻，也不是什么“更新”，但是。。。原来还有其他一些CSS样式，div.p上的大小稍微大一点，所以这两个（div.m和div.p）不能同时放在外层div.Ugh中。对不起，这是白费力气。尽管如此，我还是会接受下面的答案，因为内联块和关于img不占用空间的文章是我到达这里的关键…

你应该为图像添加一个包装器元素。由于它们处于绝对位置，因此不会占用空间（没有阻塞）。这个包装器应该获得与类为m的DIV中的图像相同的维度。让我们把它分类为“w”：）如下：

.w { width:150px; height:120px; display:inline-block; }

它应该获得display:inline块，以防止DIV获得全宽

---

你能提供一个JSFIDLE来演示你的尝试吗？也许值得阅读这些关于sitepoint的文章，而且你的CSS在

.p

中缺少一个浮点数，所以他只是一个普通的块元素，这就是为什么他要为自己画一整条线的原因。下面是

.m

。另外，您的标记中没有

i

类。我从下面获取了neoMagic的图像，并创建了JSFIDLE。如果没有开发工具，你看不到它，但是“控制面板”和结果被隐藏在猫的下面，而不是像我期望的那样被放置在右边。我看到这看起来是正确的，但是出于某种原因它没有翻译到我的页面。还有，为什么我需要一个单独的“w”，不能用“m”作为包装吗？实际上，你对没有空间的图像的评论可能是关键。看起来我还可以使用m类作为包装器。在我玩了多一点以后，我想我会把这个作为答案。

.w { width:150px; height:120px; display:inline-block; }