css - 堆叠图像的水平 Div 对齐

Question

我有四个 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>

div 应显示如下:

______________________________
|  div.m             | div.p  |
|                    |        |
|____________________|________|
|  div.r                      |
|                             |
|_____________________________|

img 应该在 div.m 中相互堆叠(我们正在操纵它们的 z-index 以获得各种效果)。堆叠是通过

postion: absolute;

本来div.m和div.p的位置调换了，放在div.c里面用a

float: left;

在 div.p 上使一切顺利进行。

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

为什么不是 float et.在工作吗？感觉这可能与图像堆叠有关，但我不确定，也不知道如何解决。

这是我认为应该工作的 CSS(因为它在标记中交换 m 和 p 并且将 float 应用于 p 时起作用)但事实并非如此:

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

更新:我是个白痴。我意识到这对认识我的人来说不是新闻，也不是什么“更新”，但是......原来还有一些其他的 CSS 样式，div.p 上的尺寸稍微大一点，所以两个 (div. m 和 div.p) 无法同时放入外部 div。啊。很抱歉追逐野鹅。尽管如此，我会接受下面的答案，因为内联 block 和关于 img 不占用空间的文章是我到达这里的关键......

Answer 1

您应该为图像添加包装器元素。因为它们是绝对定位的，所以它们不会占用空间(不是 block )。这个包装器应该获得与类 m 的 DIV 中的图像相同的尺寸。让我们给它类“w”:)像这样:

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

它应该得到 display:inline-block 以防止 DIV 获得全宽。

Try out this full example on jsfiddle