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索引）。

实现堆叠

postion: absolute;

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

float: left;

div.p上的

使一切顺利。

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

为什么不是浮动等。工作？感觉它可能与图像堆叠有关，但我不确定，也不知道如何解决它。

这是我认为应该工作的CSS（因为它在标记中交换了m和p时，并且浮点数被应用于p），但不是：

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

更新：我是个白痴。我意识到这对于那些了解我的人来说并不是一个新闻，也不是一个“更新”，但是......结果还有一些其他的CSS造型在div.pa上的大小稍微大一点，所以这两个（div。 m和div.p）不能同时适合外部div。啊。对不起野鹅追逐。同样，我将接受下面的答案作为内联块和关于img没有占用空间的部分是我到这里的关键...

Answer 1

您应该为图像添加包装元素。由于它们绝对定位，它们不会占用空间（没有阻挡）。这个包装器应该与DIV中带有m类的图像具有相同的尺寸。让我们给它类“w”:)像这样：

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

它应该显示：inline-block以防止DIV获得全宽。

Try out this full example on jsfiddle

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

1 个答案: