Question

请考虑jsfiddle演示，其中我已经制作了7张具有变换效果的卡片。现在我想对单个图像应用不同的边距，使得card2例如低15px，card3高出5px等。

但是，当我向card2申请margin-top: 15px时，div中的所有卡片都会以margin-top: 15px呈现

另一个问题是，当应用width：100％时，居中的div并没有真正居中。

<div class="centered">
<div class="container">
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
    <img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>

http://jsfiddle.net/kristofvhren/wtDE4/

Answer 1

使用＆＃39; float：left＆＃39;属于＆＃39; img＆＃39;标签，您可以在＆＃39; .card2＆＃39;

中使用保证金

Answer 2

试试这个：从图像中删除inline-block属性并使用

img {
    width: 125px;
    display:block;
    float:left;
}

代替..

在单个div中对图像应用不同的边距

2 个答案: