Question

我有一个带有一些图像的div：

    <div>
        <img><img><img><img>
    <div>

图像通常会显示在一行中，但是我使用了一些CSS来改变它们从左边的相对位置（第二个为-7px，第三个为-14px等），因此它们部分叠加在一起。有没有办法让div只是部分堆叠图像的宽度，而不是图像在没有移动的情况下的宽度？

Answer 1

如果将css设置为

div img {position: absolute;}

它们都将重叠而无需任何重新定位。它将设置img的大小，并将div设置为0，因此只有在页面下方没有任何内容时才会起作用。

Answer 2

如果内容不是动态生成的，那么您只需使用css手动将div设置为您想要的宽度。

<div class="overlap">
  <img><img><img>
</div>

.overlap {
  width: 200px;
}

Answer 3

要使图像居中，请尝试将它们包装在另一个div中。不知道你在所有的CSS中有什么，但无论如何你都可以得到这个想法。喜欢的东西：

.overlap{
    width:200px;
    outline:1px solid red;
    position:relative;
}
.overlap img{
    outline:1px solid blue;
    display:block;
    height:50px; 
    width:25px;
    position:relative;
    float:right;
}
.overlap img{
    left:-7px;
}   
.overlap img + img{
    left:-14px;
}   
.overlap img + img + img{
    left:-21px;
}
#center{
    width:100px;
    margin:0px auto;
}

<div class="overlap">
<div id="center">
    <img><img><img>
    </div>
</div>

Div大小与相对内容

3 个答案: