0

我有四个 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 中并使用

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 不占用空间的文章是我到达这里的关键......

4

1 回答 1

1

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

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

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

在 jsfiddle 上试试这个完整的例子

于 2013-09-12T22:05:31.990 回答